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

时间:2014-02-27 15:28:11

标签: asp.net css internet-explorer internet-explorer-7

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

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

由于

1 个答案:

答案 0 :(得分:0)

包含设置了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>