0

我发现 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;}​

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

在 IE 和 Firefox 中，我在蓝色内容上正确地看到了它。在 Chrome 中，“菜单”显示在内容后面。有什么方法可以让 Chrome 使用这个功能吗？

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

4

4 回答 4

1

是的，在 z-index 上增加#menu：

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

http://jsfiddle.net/Ezn4v/

于 2012-10-24T18:03:30.357 回答
1
于 2012-10-24T18:05:06.207 回答
1

You need to set the z-index for parent

#menu {z-index:11 };

Check Fiddle

于 2012-10-24T18:05:38.697 回答
1

Just add a z-index to the menu, then it will work correctly for everyone.

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

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

于 2012-10-24T18:06:32.647 回答