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

StackOverflow https://stackoverflow.com/questions/1667154

  •  13-09-2019
  •  | 
  •  

题

我已经与IE7 CSS的z-index对抗敌人一两个小时，现在，也许能帮到你！

我有一个绝对定位的div，出现其父股利，这是很大的上方。可是 - 它出现下以后的div是兄弟其父

这看起来很奇怪的水煤浆，喜欢的z-index只适用于每一格或东西的局部范围。

如何设置的东西，所以，当我设置为具有更大的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>
有帮助吗？

解决方案

IE具有主要z索引错误：

  

在Internet Explorer中定位   元素产生新的堆叠   上下文中，开头的z索引值   0因此z-index的不工作   正确。

您可以尝试改变的z索引，但如果你希望两个元素出现，你可能要拉他们一把自己的祖先结构，使他们的顶级DOM元素。

其他提示

使用位置的元素：绝对需要的绝对位置的容器内，特别是如果此容器被设置为位置：相对的。

所有的位置是：需要根据视口来在DOM直接在“体”元件被定位绝对元素。它通常被认为是很好的做法，把他们上次在你的HTML代码，只需将结束标记之前。

只是删除position: relative

图像能有一个风格=“的z-index：＃”？还是必须的图像驻留在它的DIV自己的

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top