Chrome中相对定位的div上的绝对定位元素答案

【问题标题】：absolute positioned element over relative positioned div in ChromeChrome中相对定位的div上的绝对定位元素
【发布时间】：2012-10-25 02:06:32
【问题描述】：

我发现 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 正常工作吗？

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

【问题讨论】：

标签： jquery html css css-position

【解决方案1】：

是的，在#menu 上提高 z-index：

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

http://jsfiddle.net/Ezn4v/

【讨论】：

【解决方案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;}

【讨论】：

然后将蓝色框放在页面本身的后面，这样就行不通了。
z-index 在法律上不允许负值

【解决方案3】：

您需要为父级设置z-index

#menu {z-index:11 };

Check Fiddle

【讨论】：

【解决方案4】：

只需在菜单中添加一个 z-index，它就会对每个人都正常工作。

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

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

【讨论】：