我的网页应用程序中有一个用户控件菜单,在悬停时会删除下面的菜单列表。我面临的问题是,在IE 7或IE 10兼容模式下,尽管菜单的z-index属性设置为高,但我的页面上的图像仍显示在菜单下拉。
请为我提供相关的解决方案。
由于
答案 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>