2

几个小时以来，我一直在与 IE7 敌人中的 CSS z-index 作斗争，也许你能帮上忙！

我有一个绝对定位的 div，出现在它的父 div 上方，这很棒。但是 - 它出现在后来的 div 下，它们是其父级的兄弟姐妹。

这似乎是一种很奇怪的行为，就像 z-index 只适用于每个 div 的本地范围或其他东西。

如何进行设置，以便当我将元素设置为比页面上的任何其他元素具有更大的 z-index 时，无论如何它都会出现在顶部？

这是我的测试页面：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>test</title>
</head>
<body>
<div style="position: relative; z-index: 0">
    div1
    <div style="position: relative; z-index: 0">
        div2
    </div>
    <div style="color: red; background-color: #ffffff; position: absolute; z-index: 2">
        div3
    </div>
</div>
<div style="position: relative; z-index: 0">
    div1
    <div style="position: relative; z-index: 0">
        div2
    </div>
    <div style="color: red; background-color: #ffffff; position: absolute; z-index: 2">
        div3
    </div>
</div>
<div style="position: relative; z-index: 0">
    div1
    <div style="position: relative; z-index: 0">
        div2
    </div>
    <div style="color: red; background-color: #ffffff; position: absolute; z-index: 2">
        div3
    </div>
</div>
</body>
</html>
4

4 回答 4

0

具有 position:absolute 的元素将在其容器内采用绝对位置，特别是如果此容器设置为 position:relative。

所有需要根据视口定位的 position:absolute 元素都应该在 DOM 中直接位于“body”元素下。通常认为将它们放在您的 html 代码中的最后，就在结束 body 标记之前是一种很好的做法。

于 2009-11-03T12:54:49.783 回答
0

IE 有一个主要的 z-index 错误：

在 Internet Explorer 中，定位元素会生成一个新的堆叠上下文，从 z-index 值 0 开始。因此 z-index 无法正常工作。

您可以尝试更改 z-indexes，但如果您希望这两个元素都出现，则可能必须将它们从其祖先结构中拉出并使其成为顶级 DOM 元素。

于 2009-11-03T13:00:01.893 回答
0

图像可以有 style='z-index: #' 还是图像必须位于它自己的 div 中？

于 2012-05-17T15:56:08.360 回答
0

只需删除position: relative

于 2012-01-13T13:45:55.700 回答