<分区>
<分区>
我想弄清楚为什么当给定的 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/
如有任何想法，我们将不胜感激。
最佳答案
It only appears to work when you do not touch the parent's default z-index value.
这是因为在定位元素上将 z-index 设置为默认 auto 以外的值会导致它建立新的堆叠上下文，并且无法定位元素在创建它所在的堆叠上下文的元素后面。(元素不能位于根堆叠上下文后面，例如 Scotty C. 状态。)
当您保留父元素的 z-index 不变时，父元素和子元素都参与同一个堆栈上下文，这是由根元素建立的，或者 根堆叠上下文。这就是为什么在这种情况下您可以将 child 放在 parent 后面。
所有详细信息都可以在 spec 中找到，但这就是您提出问题的要点。
关于html - 为什么 z-index 小于父元素的子元素不会显示在父元素后面？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19920033/