当使用嵌套DIV时，如何从IE获得所需的z-index行为？

Question

我有三个DIV，类似这样：

<div id="header">
    ...
</div>
<div id="content">
    <div id="popup">
        ...
    </div>
</div>

DIV＃标题是“position：fixed”并用作屏幕顶部的非滚动标题。 DIV＃内容中包含一些内容，并且是“position：relative”。 DIV＃popup是“position：absolute”并且开始隐藏并在悬停时显示。

我希望弹出窗口位于页面的最高级别，如果它们重叠，它甚至高于DIV＃标题。这在Firefox中运行良好，但在IE中，弹出窗口位于标题后面。我可以通过将DIV＃内容的z-index设置为高于标题来解决这个问题，但当然DIV＃内容在重叠时也会显示在DIV＃标题之上，这是我不想要的。

听起来我可能会受到this page所描述内容的影响。但是，正如我所理解的那样，做一些事情，比如在所有元素上设置默认的z-index，如下所示：

* {
    z-index: 1
}

应该解决这个问题（因为现在每个元素的z-index都明确设置为1），但是不是在IE中修复它，而是在Firefox中打破它（这样Firefox现在就像IE一样）。

IE中z-index的实际应用是什么？

Answer 1

IE中存在一个错误，我认为它是用IE8修复的，其中z-index堆栈针对页面中存在的每个位置相对上下文重置。含义z-index在不同的相对位置容器内是独立的。

您描述的错误可能与此有关。尝试通过将弹出窗口定位在鼠标单击位置来替换相对位置。

另一个链接： http://therealcrisp.xs4all.nl/ie7beta/css_zindex.html

Answer 2

如果DIV＃popup应该总是出现在所有其他元素之上，为什么不将它提升到DOM中的顶级？

<div id="header">
    ...
</div>
<div id="content">
    ...
</div>
<div id="popup">
    ...
</div>