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

时间:2008-12-11 23:08:28

标签: html css internet-explorer

我有三个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的实际应用是什么?

2 个答案:

答案 0 :(得分:0)

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

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

答案 1 :(得分:0)

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

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

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

豫ICP备18024241号-1