html - 堆栈上下文在 css 中究竟是如何工作的？

Question

堆叠上下文

正如您在图像中看到的，我具有以下结构：

#container {
  background-color: yellow;
  position: relative;
}

#child1 {
  background-color: greenyellow;
  position: absolute;
  top: 0;
}

#child1a {
  background-color: green;
  z-index: 40;
}

#child2 {
  position: absolute;
  z-index: 1;
  background-color: violet;
}

<div id="container">
  <div id="child1">
    <div id="child1a" />
  </div>

  <div id="child2" />
</div>

据我了解， child1 不应该创建新的堆叠上下文，因为我没有指定 z-index。因此 child1a 的父堆叠上下文应该与 child2 的父上下文相同，并且由于 child1a 的 z-index 大于 child2 的 z-index 应该高于 child2，我在这里缺少什么？

标签： htmlcssz-index