为什么 z-index 小于其父级的子元素不会显示在父级后面？ [复制]答案

【问题标题】：Why won't a child element with a lesser z-index than it's parents show behind the parent? [duplicate]为什么 z-index 小于其父级的子元素不会显示在父级后面？ [复制]
【发布时间】：2013-11-12 13:59:47
【问题描述】：

我试图弄清楚为什么当给定的 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/

任何想法将不胜感激。

【问题讨论】：

也许是因为如果它在父级内部，它将与父级位于相同的 z-index 上。它不需要在父级中才能位于自己的 z-index 上。
z-index 值被堆叠...见How to reverse the order of nested child elements
你要找的是stacking contextdeveloper.mozilla.org/en-US/docs/Web/Guide/CSS/…

标签： html css z-index

【解决方案1】：

只有当您不触摸父级的默认 z-index 值时，它才会起作用。

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

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

所有详细信息都可以在spec 中找到，但鉴于您的问题，这就是它的要点。

【讨论】：

【解决方案2】：

因为 Z-Index 级别与其父级相关。这与说“如果我设置负 Z-Index，为什么元素不显示在浏览器窗口后面？”是一样的。通常，如果您要对关卡做一些时髦的事情，您可能会考虑使用两个具有绝对或相对定位的兄弟元素。尽管这种方法有时被认为是“hacky”。

【讨论】：