z-index 失效？你可能忽略了层叠上下文！

「小墨是前端」致力于分享实用前端技术、挖掘优秀的开源项目，带你探索前端的奇妙世界，共同学习进步。

z-index属性，前端开发中看似简单却暗藏玄机。你可能经历过这样的场景：为元素设置了看似足够大的z-index值，期望它在最前端，却发现它依然被其他元素遮挡，令人百思不得其解。

问题的关键在于，z-index并非简单的数值大小比较，它与层叠上下文 (Stacking Context)和层叠顺序 (Stacking Order)密切相关。

层叠上下文

假设一下，网页是由一个个独立的三维空间组成的，每个空间都有自己的 Z 轴，这就是层叠上下文。每个层叠上下文就像一个独立的“小世界”，z-index值只在这个“小世界”内部有效。如果两个元素不在同一个层叠上下文中，即使它们的z-index值差异巨大，也不会按照你预想的方式层叠。

那么，哪些元素会创建层叠上下文呢？以下几种情况会触发层叠上下文的创建：

• 根元素 ()

•position值为absolute、relative或fixed的元素

•opacity值小于 1 的元素

•transform值不为none的元素

层叠顺序

在同一个层叠上下文中，元素的层叠顺序决定了它们的最终显示层级。即使没有设置z-index，元素也会按照默认的层叠顺序排列。

层叠顺序大致可以分为以下七个层级：

1. 背景和边框

2.z-index为负的定位元素

3. 块级盒子

4. 浮动盒子

5. 行内盒子/行内块盒子

6.z-index为0或auto的定位元素

7.z-index为正的定位元素

需要注意的是，z-index值只影响定位元素（position值为absolute、relative或fixed）的层叠水平。对于非定位元素，z-index值无效。

案例分析与代码示例

假设我们有两个div元素：

<div class="element1">元素 1</div>

<div class="element2">元素 2</div>

.container {

position: relative; /* 创建层叠上下文 */

}

.element1 {

position: absolute;

z-index: 1;

background-color: lightblue;

}

.element2 {

position: absolute;

z-index: 2;

background-color: lightcoral;

}

由于.container设置了position: relative，它创建了一个层叠上下文。.element1和.element2都位于这个层叠上下文中，它们的z-index值将决定它们的层叠顺序。由于.element2的z-index值更大，它将显示在.element1之上。

避坑指南

• 检查层叠上下文：确保需要进行层叠比较的元素位于同一个层叠上下文中。

• 仔细设置position属性：z-index只有作用于定位元素才有效。

• 避免过度使用z-index：层叠上下文嵌套过深会导致调试困难。

总结

z-index看似简单，其实也含着层叠上下文和层叠顺序的复杂逻辑。只有深入理解这些概念，才能真正掌握z-index的使用技巧，避免层叠混乱带来的困扰。

创作不易，求点赞、求在看、求转发！你的支持是我创作的最大动力！关注小墨，带你解锁更多前端技能！