html - 解释为什么这个元素不呈现在前面

Question

我正在努力学习堆栈上下文的工作原理，并能够用正确的 CSS 术语来表达和解释它是如何工作的。

我有以下 JSFiddle示例:

HTML:

<div class="header">
    <div class="menubox">Menu Box</div>
</div>

<div class="carousel">
    <div class="imagebox">Image box</div>
</div>

CSS:

.header { width: 400px; height: 100px; background: grey; position: relative; }
.header .menubox { width: 80px; height: 90px; background: pink; position:absolute; top: 50px; left: 70px; }

.carousel { width: 400px; height: 90px; background: lightblue; position:relative;}
.carousel .imagebox { width:80px; height:90px; background: yellow; position:absolute; top: 20px; left: 90px; }

/* Here we will change z-index properties and experiment with Stacking Contexts */
.header { z-index:2; }
.header .menubox { z-index:3; }

.carousel { }
.carousel .imagebox { z-index:2; }

如上呈现。

为什么.menubox 没有显示在.imagebox 前面？

这是我试图解释的:

设置 z-index 后，将在 .header 元素上创建一个新的堆叠上下文。 .imagebox 元素还设置了一个 z-index，它也创建了一个新的堆叠上下文。因此，这两个上下文可以相互比较。然而，即使它们都具有相同的堆叠级别 (z-index:2)，.imagebox 在 DOM 中的位置较晚，因此 .imagebox 呈现在顶部。

我觉得我上面的解释在技术上是不正确的，我无法清楚地表达出来。或者也许我的理解是完全无效的!有人能说出关于堆叠上下文和堆叠级别的情况吗？

注意:我知道如果我将 .header 的 z-index 设置为 3，这将使 .menubox 完全位于前面，所以我不是在寻找“如何修复”它的答案。

Answer 1

是的，设置z-index为 parent .header容器建立一个新的本地堆栈上下文，这意味着 .menubox元素将显示在 .imagebox 后面如果将容器 z-index 更改为 3，它将显示在前面 - 参见 this jsfiddle

另外，查看关于 z-index 的 MDN 文章 here .该文章解释了(关于具有指定 z-index 的元素而不是 auto )

This integer is the stack level of the generated box in the current stacking context. The box also establishes a local stacking context in which its stack level is 0. This means that the z-indexes of descendants are not compared to the z-indexes of elements outside this element.

编辑:“容器”是指 .menubox parent <header>元素。