Question

我已经在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>

Answer 1

具有position：absolute的元素将采用其容器内的绝对位置，尤其是当此容器设置为position：relative时。

所有位置：需要根据视口定位的绝对元素应直接位于“body”元素下的DOM中。通常认为将它们放在html代码中的最后一个，就在关闭正文标记之前。

Answer 2

IE有major z-index bug：

在Internet Explorer中定位元素生成新的堆叠上下文，以z-index值开头因此，z-index不起作用正确。

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

Answer 3

只需删除position: relative

即可

Answer 4

图片可以有一个style ='z-index：＃'，还是图片必须位于它自己的div中？

CSS z-index被页面上的元素顺序覆盖？

4 个答案: