Question

我在Chrome中遇到z-indexes问题。橙色div应该落在黑色div之后。除了在Chrome中，它确实如此。有人可以帮忙吗？情况如下：

.page {
    height:900px;
    background:orange;
    width:80%;
    position:relative;
    z-index:8;
    top:120px;
}

http://jsfiddle.net/yXTF6/4/

Answer 1

你是在top-img类中设置z-index，但你应该在后台类中进行

如果背景类本身不高于其他背景类，则无论如何都无法在类的后代修复此问题。

编辑：

这里是小提琴 - http://jsfiddle.net/vals/cTf72/

.top-img {
    height:100px;
    background:black;
    position:relative;
    z-index:9;
}

我刚刚在.background中添加了.top-img

中的z-index：9 顶部，页面和背景是兄弟姐妹，所以他们在z-index之间“竞争”。但是，一旦选择其中一个，他们所有的后代都会在同一个包中，所以说。在top-img中设置z-index是没用的，因为它没有兄弟姐妹可以竞争，也不能改变父级的z-index（背景）

Answer 2

正如@vals在他的回答中提到的那样，你使用的标记是不可能的。所以我决定调整它并告诉你它是如何工作的。

如果您删除了包裹黑条和图像的<div class="background">，那么您可以按照自己的方式使页面工作。我调整了黑条<div>和<img>的类，以便它仍然具有与之前相同的效果。

这是link to the jsfiddle。

这是更新的标记和CSS。

<div class='top-img background'></div>
<img class="background" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSJGQ7eqRuhZQqbX1roKW8zBGVHW-VlmQq0uTGCZjDGDHCRljPp" />
<div class='top'>
</div>
<div class='page'>
</div>

和CSS

.background {
    position:fixed;
    width:100%;
}
.top-img {
    height:100px;
    background:black;
    z-index:9;
}
img {
    width:100%;
    z-index:7;
    top : 100px;
}
.top {
    position:fixed;
    width:60%;
    height:60px;
    top:60px;
    background:yellow;
    z-index:10;
}
.page {
    height:900px;
    background:orange;
    width:80%;
    position:relative;
    z-index:8;
    top:120px;
}

Z-index适用于Firefox和IE，但不适用于Chrome

2 个答案: