Question

我发现Chrome在相对定位div上显示绝对定位元素的方式存在差异

这是一些标记：

<div id="maincontent">
<table id="mainTable">
   <tr class="menuRow">
       <td >
            <div id="menu">
                <ul id="panel">
                    <li>Option 1</li>                                     
                    <li>Option 2</li>                                     
                    <li>Option 3</li>                                     
                </ul>    
            </div>
     </td>
    </tr>
    <tr>
        <td class="contentRow">
            <div id="content" >

            </div>
       </td>
    </tr>
</table>

CSS：

#maincontent { width: 100%; }
#mainTable { width: 100%; }
#menu { position: fixed; background-color: green; 
width: 30px; height: 30px; cursor:     pointer; }
#panel{ position: absolute; height: 150px; width: 100px;
 background-color: red;     display:none; z-index:10; }
#content { margin-top: 30px; height: 300px; width:300px;
 background-color: #00F; position:relative;}

我整理了一个展示我问题的示例here。（如果将鼠标移到绿色框上，则显示红色“菜单”）

在IE和Firefox中，我在蓝色内容中正确看到了它。在Chrome中，“菜单”显示在内容背后。有什么方法可以让这项工作适用于Chrome？

非常感谢，欢迎任何反馈。

Answer 1

Yup，#menu上的z-index：

#menu { 
    position: fixed; 
    background-color: green; 
    width: 30px; 
    height: 30px; 
    cursor: pointer; 
    z-index: 9999;
 }

http://jsfiddle.net/Ezn4v/

Answer 2

降低蓝色内容div的索引：

#content { margin-top: 30px; height: 300px; width:300px; background-color: #00F; position:relative; z-index: -1;}

或者提高菜单的索引：

#menu { position: fixed; background-color: green; width: 30px; height: 30px; cursor: pointer; z-index: 1;}

Answer 3

您需要为父

设置 z-index

#menu {z-index:11 };

Check Fiddle

Answer 4

只需在菜单中添加一个z-index，它就能正常运行。

#menu {z-index:2; position: fixed; background-color: green; width: 30px; height: 30px; cursor:

http://jsfiddle.net/sU66E/2/

Chrome中相对定位div的绝对定位元素

4 个答案: