html - 为什么 z-index 不影响父兄弟姐妹？

Question

请看一下这个标记：

<div class="outer">
    <div class="inner" />
</div>
<div class="outer" style="background-color: green">
<div>

这个CSS：

.outer {
    position: relative;
    z-index: 10;
    width: 50px;
    height: 20px;
    background-color: blue;
}
.inner {
    position: absolute;
    z-index: 20;
    top: 5px;
    left: 5px;

    width: 50px;
    height: 50px;
    background-color: red;
}

呈现为：

（您也可以在此处查看 jsfiddle）。

为什么绿色 div 与红色重叠，尽管它的 z-index 较低？

Answer 1

红色盒子参与蓝色盒子的堆叠上下文，而不是绿色盒子的。绿色框的 z-index 与红色框的堆栈级别无关。

由于绿色和蓝色框都.outer具有相同的 z-index 10，并且绿色在源中的蓝色之后，因此绿色位于蓝色及其内容之上。