深入理解CSS中的z-index：层叠上下文与堆叠顺序

前言

在前端开发中，z-index是一个看似简单但实际上容易让人困惑的CSS属性。本文将通过一个实际的HTML/CSS例子，深入探讨z-index的工作原理及其应用场景。

示例代码分析

让我们先看一下提供的HTML和CSS代码：

<div class="box"><div class="box1"></div><div class="box2"></div>
</div>
<div class="box3"></div>

对应的CSS样式：

.box {position: relative;width: 200px;height: 200px;z-index: 1;
}.box1, .box2 {position: absolute;width: 100px;height: 100px;
}.box1 {background-color: pink;top: 10px;left: 10px;
}.box2 {background-color: skyblue;top: 20px;left: 20px;z-index: 999;
}.box3 {position: absolute;height: 120px;width: 120px;top: 30px;left: 30px;background-color: greenyellow;z-index: 2;
}

z-index的基本概念

z-index属性决定了元素在z轴上的堆叠顺序。数值越大，元素就越靠近用户的眼睛。但z-index的工作方式比表面看起来要复杂得多。

层叠上下文（Stacking Context）

关键点在于理解层叠上下文。层叠上下文是一个三维概念，它决定了元素在z轴上的排列方式。以下情况会创建新的层叠上下文：

1. 根元素（HTML）
2. position值为absolute或relative且z-index值不为auto的元素
3. position值为fixed或sticky的元素
4. flex容器的子项且z-index值不为auto
5. opacity值小于1的元素
6. transform值不为none的元素
7. 等等…

在我们的例子中：

• .box创建了一个层叠上下文（因为它是relative定位且z-index为1）
• .box3也创建了自己的层叠上下文（absolute定位且z-index为2）

堆叠顺序分析

让我们分析示例中的堆叠顺序：

1. .box的z-index为1，创建了一个层叠上下文

   • 在这个上下文中：

     • .box2的z-index为999
     • .box1没有设置z-index（默认为auto）

   • 因此，在.box内部，.box2会覆盖.box1

2. .box3的z-index为2，创建了另一个层叠上下文

   • 因为.box3的z-index(2) > .box的z-index(1)
   • 所以整个.box3会覆盖整个.box及其所有内容

有趣的是，尽管.box2的z-index高达999，但它仍然被.box3覆盖，因为：

• .box2的999只在.box的层叠上下文中有效
• .box整体与.box3比较时，使用的是.box的z-index值1
• 1 < 2，所以.box3覆盖.box及其所有内容

实际渲染结果

根据上述分析，最终的堆叠顺序从下到上为：

1. .box1（粉色，z-index: auto）
2. .box2（天蓝色，z-index: 999）覆盖.box1
3. .box3（绿色，z-index: 2）覆盖.box及其所有内容

重要结论

1. z-index值只在同一个层叠上下文中比较才有意义。不同层叠上下文中的z-index值不能直接比较。
2. 子元素的z-index不能突破父层叠上下文的限制。即使子元素的z-index很高，如果父元素的z-index较低，子元素仍然会被其他更高层叠上下文中的元素覆盖。
3. 理解层叠上下文的创建条件是掌握z-index的关键。

开发建议

1. 尽量保持z-index的可维护性，可以预先规划好z-index的层级（如设置SASS变量）
2. 避免使用过大的z-index值（如9999），这通常是设计问题的表现
3. 当z-index不按预期工作时，检查元素是否创建了新的层叠上下文

总结

z-index不是简单的数值比较，而是与层叠上下文密切相关的复杂系统。理解层叠上下文的概念，才能正确预测和控制元素的堆叠顺序。通过本文的示例和分析，希望你能更深入地掌握z-index的工作原理，在实际开发中避免常见的层叠问题。