Question

我的网页应用程序中有一个用户控件菜单，在悬停时会删除下面的菜单列表。我面临的问题是，在IE 7或IE 10兼容模式下，尽管菜单的z-index属性设置为高，但我的页面上的图像仍显示在菜单下拉。

请为我提供相关的解决方案。

由于

Answer 1

包含设置了position: relative的菜单列表的父元素需要的z-index高于正文的z-index。 z-index也在自上而下的基础上工作，因为在菜单之后声明的元素比它们之前的元素具有更高的z-index。

tl; dr ..

将菜单设置为具有比内容更高的元素

（带内联样式的示例）

<body>
    <div class="header">
    ...
    </div>
    <div class="nav" style="position:relative; z-index: 2">
        <ul>
           <li>
               Blah
               <ul class="drop-menu">
                   <li>drop item</li>
               </ul>
           </li>
        </ul>
    </div>
    <div class="content" style="position:relative; z-index:1">
        ...
    </div>
</body>

z-index发布Internet Explorer兼容模式和7

1 个答案: