Html 为什么赢了'；t z索引小于它的子元素'；谁的父母在父母身后？

我试图弄明白，当给定的z索引值低于父元素时，为什么子元素不会出现在其父元素后面。仅当您不触摸父项的默认z索引值时，它才显示有效

这里有一个基本的例子

HTML:

链接到示例：

---

如果您有任何想法，我们将不胜感激。

因为Z指数水平与父母相关。这和“如果我设置了一个负的Z索引，这个元素不显示在浏览器窗口后面”是一样的吗？“一般来说，如果你要做一些有层次的事情，你可以考虑有两个兄弟元素有绝对的或相对的定位。尽管这种方法有时被认为是“黑客的”

仅当您不触摸父项的默认z索引值时，它才显示有效

这是因为在定位元素上将

z-index

设置为其默认值

auto

以外的值会导致其建立新的堆叠上下文，并且元素不能定位在创建其所在堆叠上下文的元素后面。（元素不能定位在根堆栈上下文后面，例如，作为状态。）

当您保持父元素的

z-index

不变时，父元素和子元素都参与相同的堆叠上下文，即由根元素或根堆叠上下文建立的堆叠上下文。这就是为什么在这种情况下可以将子对象放在父对象后面

---

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

可能是因为如果它在父级中，它将与父级位于相同的z索引上。它不需要在父级中，就可以使用自己的z索引。

z索引

值是堆叠的。。。查看您要查找的是

堆叠上下文

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

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