Css 为什么这个div位于其他两个嵌套div之间？z指数相关

最好的解释方法是通过以下示例：

我对z索引和堆栈上下文有很好的理解，但我无法找出为什么div1 blue能够出现在红色和绿色的堆栈之间。有人能解释一下吗

#div1{ 
    width: 200px;
    height: 50px;
    background-color: blue;
    position: relative;
    top: 20px;
    left: 15px;
    z-index: 1;
}
#div2 {
    width: 200px;
    height: 50px;
    position: relative;
    top: -50px;
    background-color: red;
}
#inner{
    width: 200px;
    height: 50px;
    position: relative;
    top: 40px;
    left: 30px;
    background-color: green;
    z-index: 2;
}

还有HTML

<div id="div1"></div>

<div id="div2">
    <div id="inner"></div>
</div>​
​

你的红色div，div2没有z索引。但是div1和inner会。如果将z索引放在div2上，则蓝色div不会出现在绿色div和红色div之间

z索引适用于父div和子div

<div id="div1" style="z-index:1"></div>


<div id="div2" style="z-index:2">
   <div id="div4" style="z-index:4;"><!--Higher than any of the other divs--></div>
</div>

<div id="div3 style="z-index:3">
    <div><!-- any div inside div3 are higher than div1 and div2 but not div4</div>
</div>

---

你想完成什么？红色div没有z索引；蓝色z指数：1；优先，并且将在红色上方可见。但是绿色的z指数为2，所以它在两个区域都可见，因为z指数应该与兄弟姐妹进行比较。因此，应该将div1上的z索引与div2进行比较，将1放在顶部。我希望这能让第二组的孩子们也出现在第1组下面。下面是一个以类似方式显示预期行为的示例：但将div1与其同级div2进行比较，div1的z索引为1，而div2没有。如果给div2一个z-index也为1，那么它将位于div1之上。或者…从div1中删除z-index。因此，如果一个兄弟姐妹根本没有z-index，而您正在与它进行比较，它将使用最高子级的z-index。。。我理解对了吗？我认为你的思路是对的，但你的结论是错误的。在您的示例中，div3的子级将位于div4之上，因为将div3与其兄弟div2进行比较。当同级父级都有z索引时，子级z索引仅在其父级堆栈上下文中使用。谢谢你！我不知道。我知道，如果div2根本没有z索引，那么div3就会高于div3。是这样吗？正当z索引和嵌套元素肯定会变得比我直到最近才意识到的更复杂我看到了这一页，它似乎很好地解释了事情。到目前为止，我只浏览了一下：