为什么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;
}

以如下方式呈现：

（You can also take a look at jsfiddle here）。

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

Answer 1

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

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