html - IE-7 z-index 问题 - 下拉区域位于横幅下方，其内容未在 IE-7 中显示

Question

我在这里创建了一个测试用例http://testcases.site44.com/在 IE-7 中，下拉菜单不会覆盖横幅图像。在 Firefox 和 Chrome 中没问题。

请帮忙找出问题

Answer 1

IE 在理解 z-index 方面有不同的方法。 除了上述链接中非常恼人的 HTML 方法外，您还应该执行以下操作:

如果你有 2 个 div，并且在第一个中有一些东西应该覆盖第二个中的内容，那么你需要在它们两个上设置 z-index，并且为具有超越另一个的内容。

例子:

<div id="wrapper">
 <ul id="flyout">
 //
 </ul>
</div>
<div id="content">
 //
</div>

CSS:

#wrapper {position:relative;z-index:2;}
#flyout {position:relative;z-index:3;}
#content {position:relative;z-index:1;}

IE 现在知道第一个 div 中的内容应该覆盖第二个 div 中的内容。