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

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;
}

我刚刚将 .top-img 中的 z-index: 9 添加到 .background

top、page 和 background 是同级的，因此它们在 z-index 之间“竞争”。但是一旦他们中的一个被选中，他们所有的后代都会归为一类，可以这么说。在top-img中设置一个z-index是没有用的，因为它没有兄弟可以竞争，并且不能改变父（背景）的z-index

Answer 2

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

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

这是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;
}