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，但你应该在后台类中设置

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

编辑:

这是 fiddle - 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 是 sibling ，因此它们之间“竞争”z-index。但是，一旦他们中的一个被选中，他们的所有后代就会归于同一个群体，可以这么说。在 top-img 中设置 z-index 是没有用的，因为它没有兄弟竞争，也不能改变父(背景)的 z-index