jquery - Chrome 中相对定位的 div 上的绝对定位元素

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

是的，在 #menu 上调高 z-index:

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

http://jsfiddle.net/Ezn4v/