解释为什么这个元素不会在前面渲染

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容器设置.header会建立一个新的本地堆叠上下文，这意味着.menubox元素将显示在.imagebox后面如果您更改了容器z-index为3，它将显示在前面 - 请参阅this jsfiddle

另外，请查看有关z-index here的MDN文章。本文解释了（关于具有除auto以外的指定z-index的元素）

  

此整数是当前堆叠上下文中生成的框的堆栈级别。该框还建立了一个堆栈级别为0的本地堆栈上下文。这意味着后代的z索引不会与该元素之外的元素的z索引进行比较。

编辑：按“容器”，我的意思是.menubox父<header>元素。

Answer 2

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

似乎有用