CSS 层叠上下文：让 z-index 奏效的幕后功臣

在 CSS 布局中，z-index 经常被用来控制元素的堆叠顺序。但是，很多时候我们发现，即使设置了 z-index，元素也没有按照预期的那样显示。这可能是因为您忘记了一个重要的概念：CSS 层叠上下文。

层叠上下文是一个三维空间，其中元素根据其 z-index 值进行定位。层叠上下文中的元素不会受到其他层叠上下文中元素的影响，反之亦然。

一个元素是否属于某个层叠上下文，取决于以下因素：

• 根元素（html）始终是一个层叠上下文。
• 具有 position 属性值为 absolute、fixed 或 sticky 的元素会创建新的层叠上下文。
• 具有 overflow 属性值为 scroll、auto 或 hidden 的元素（除了 html 元素）也会创建新的层叠上下文。
• 具有 will-change 属性值为 opacity、transform、scroll-position 的元素也会创建新的层叠上下文。

为了确保 z-index 能够正常工作，您需要确保元素位于正确的层叠上下文中。如果元素不在正确的层叠上下文中，那么它的 z-index 将不会生效。

案例演示：

<div id="container">
  <div id="child1">Child 1</div>
  <div id="child2">Child 2</div>
</div>

#container {
  position: relative;
  width: 200px;
  height: 200px;
  background-color: #f0f0f0;
}

#child1 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100px;
  height: 100px;
  background-color: #ff0000;
  z-index: 1;
}

#child2 {
  position: absolute;
  top: 50px;
  left: 50px;
  width: 100px;
  height: 100px;
  background-color: #00ff00;
  z-index: 2;
}

在这个例子中，#container 是一个层叠上下文。#child1 和 #child2 都具有 position 属性值为 absolute，因此它们也会创建新的层叠上下文。这意味着 #child1 和 #child2 不受 #container 层叠上下文的影响，反之亦然。

因此，即使 #child2 的 z-index 值为 2，它也不会显示在 #child1 的上面。这是因为 #child2 位于另一个层叠上下文中。

如果您想让 #child2 显示在 #child1 的上面，您需要将 #child2 的父元素（#container）设置为一个层叠上下文。您可以通过将 #container 的 position 属性值设置为 relative 或 fixed 来实现这一点。

#container {
  position: relative;
  width: 200px;
  height: 200px;
  background-color: #f0f0f0;
}

现在，#child2 将显示在 #child1 的上面，因为它们都位于同一个层叠上下文中。

希望这篇博客对您有所帮助。如果您有任何问题，请随时给我留言。