为什么你的 z-index 不起作用（以及真正的解决方法）

你是不是遇到过这种情况：

设置了 z-index: 9999，结果你的元素还是被其他东西“欺负”藏到后面去了？

放心，这种感觉我也深有体会，曾经对着屏幕狂喊，查了无数次谷歌。

真相是：z-index 没坏，问题出在你可能正在和一个看不见的“力场”——堆叠上下文（stacking context）作斗争。

一旦搞懂它，你再也不用盲目提高数字来“救急”了。

下面轻松说说 z-index 和堆叠上下文。

 z-index 基础理解

在 CSS 中，z-index 控制重叠元素的前后顺序。

值越大，元素越靠前显示。

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

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

例如，.box2 的 z-index 高于 .box1，所以它会显示在前面。

 定位对 z-index 的影响

z-index 只有在元素设置了非默认定位（非 static）时才生效。

换句话说，你得把元素设置成 relative、absolute、fixed 或 sticky，z-index 才会起作用。

如果没设置，z-index 是白搭。

堆叠上下文：无形的界限

堆叠上下文就像元素沿着 z 轴的“立体宇宙”。

在不同的堆叠上下文中，z-index 只在当前上下文里比较，无法跨上下文“穿越”。

哪些 CSS 属性会创建新的堆叠上下文呢？比如：

• 带有非 autoz-index 的定位元素
• 不等于 1 的 opacity
• 非 none 的 transform、filter、perspective、clip-path、mask
• contain 和 will-change 指定的属性

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

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

举例来说，.child 即使 z-index 比父元素外的元素高，也无法超越 .parent 堆叠上下文的限制。

 常见问题与对策

• 没设置定位记得给元素设个非 static 定位。

• 嵌套堆叠上下文注意父元素是否创建了新的堆叠上下文，会限制子元素的层级关系。

• 意外创建堆叠上下文比如不小心用到 opacity 小于 1 或 transform，让你没想到的新上下文诞生。

 调试技巧 

• 用浏览器开发者工具查看元素的计算样式，找出实际的 z-index 和堆叠上下文。

• 简化结构暂时注释 CSS，查找哪个属性导致了新的堆叠上下文。

• 明确设置 z-index必要时给父元素也加上 z-index，以控制堆叠顺序。

总结

理解 z-index 和堆叠上下文的工作原理，是控制网页元素层叠顺序的关键。

只要确保定位正确，留心堆叠上下文的产生，你就能轻松掌控元素显示层级。