Question

我试图弄清楚为什么当给定比父级更低的z-index值时，子元素不会出现在其父元素后面。当您不触摸父级的默认z-index值时，它似乎才有效。

这是一个基本的例子。

HTML：

<div class="a">
    A DIV
    <div class="b">
        B DIV
    </div>
</div>

CSS：

.a {
    position: relative;
    background: #eaeaea;
    height: 200px;
    width: 200px;
    z-index: 20;
}
.b {
    position: relative;
    z-index: -20;
    background: #d6d6d6;
    height: 100px;
    width: 100px;
}

链接示例： http://jsfiddle.net/V4786/2/

任何想法都会受到赞赏。

Answer 1

因为Z-Index水平与父母相关。这与说“如果我设置负Z-Index，为什么元素不显示在浏览器窗口后面？”一般来说，如果你打算用水平做一些时髦的事情，你可能会考虑让两个兄弟元素具有绝对或相对的位置。虽然这种方法有时被认为是“hacky”。

Answer 2

当您不触及父级的默认z-index值时，它似乎才有效。

这是因为将z-index设置为定位元素上的默认auto之外的其他内容会导致它建立新的堆叠上下文，并且元素不能位于创建堆叠上下文的元素后面它位于。（元素不能位于根堆叠上下文的后面，例如，Scotty C.状态。）

当您保持父元素的z-index不变时，父元素和子元素都参与相同的堆叠上下文，即根元素建立的堆栈上下文，或根堆叠上下文< / em>的。这就是为什么你可以在这种情况下将孩子放在父母身后。

所有细节都可以在spec中找到，但这是给出问题的要点。

为什么z-index比其父母更少的子元素不会显示在父元素后面？

2 个答案: