html - 绝对和相对 div 之间的 Z 索引(所有浏览器)

Question

我对绝对和相对 div 之间的定位有疑问。

这是我的 HTML 代码:

<ul style="position: absolute; z-index:10">menu</ul>

<div id="box-img" style="position: relative; z-index:9">
    <div style="position: absolute"></div>
</div>

UL 标记出现在“box-img”DIV 下方，尽管它具有更高的 z-index 属性。为什么？

如果我删除“box-img”DIV 中的相对位置，那么 UL 标签就会出现。

我该如何解决这个问题？

Answer 1

在 IE 中，无论何时将位置 CSS 规则应用于元素，它都会在该元素内生成一个新的堆叠上下文。这意味着 z-index 只会在该元素的子元素中得到适当的尊重，而具有较低 z-index 的其他堆叠上下文中的子元素可能仍会堆叠在上面。

参见此处:http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html