Z-index问题——我错过了什么？

Z-index问题通常是因为层叠上下文不正确造成的。为了正确使用z-index，需要遵循以下几个步骤：

1. 确保目标元素定位（position）不是 static（静态定位）。因为 z-index 只能应用于定位元素。

2. 确认目标元素被放在正确的层叠上下文（stacking context）中。层叠上下文是一个三维概念，并且可以由以下几个元素创建：

   • 根元素（HTML元素）
   • 定位（position）值不是 static 而是 absolute、relative、fixed 或 sticky 的元素
   • CSS3 Flexbox 布局中的元素（display: flex 或 inline-flex元素的直接子元素）
   • CSS Grid 布局中的元素（display: grid 或 inline-grid 元素的直接子元素）
   • 具有 opacity（透明度）小于1的元素
   • 具有 transform（变换）属性的元素
   • 具有 mix-blend-mode（混合模式）属性且值不是 normal 的元素
   • z-index 值不是 auto 的元素

   如果目标元素位于正确的层叠上下文内，那么它的 z-index 值就会在这个上下文中有效。

以下是一个例子，其中 z-index 在正确的上下文中起作用：

HTML：

<div class="parent">
  <div class="child">
    <div class="grandchild"></div>
  </div>
</div>

CSS：

.parent {
  position: relative;
  z-index: 1;
}

.child {
  position: relative;
  z-index: 2;
}

.grandchild {
  position: relative;
  z-index: 3;
}

在这个例子中，grandchild 元素的 z-index 值可以比父元素高，因为所有元素都有明确定位。