为什么 z 索引小于父元素的子元素不会显示在父元素后面？

Question

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

下面是一个基本示例。

.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 索引值时，它才似乎有效。

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

如果保持父元素的z-index不变，则父元素和子元素都参与同一个堆叠上下文（由根元素建立的上下文）或根堆叠上下文。这就是为什么在这种情况下您可以将孩子放在父母后面的原因。

所有细节都可以在规范中找到，但这是您的问题的要点。

Answer 2

因为 Z 指数水平是相对于其父级的。这相当于说"如果我设置了负 Z-Index，为什么元素不显示在浏览器窗口后面？一般来说，如果你要用关卡做一些时髦的事情，你可以考虑有两个具有绝对或相对定位的兄弟元素。尽管这种方法有时被认为是"黑客"。