z-index在css中不起作用的主要原因有三点：首先，元素必须设置非static的position属性（如relative、absolute、fixed或sticky），否则z-index无效；其次，不同定位方式的元素处于不同的层叠上下文中，例如fixed和sticky元素层级独立于relative与absolute；最后，z-index的作用范围仅限于同一父级内的兄弟元素之间，嵌套结构中的高z-index子元素无法超越低层级父元素之外的其他父级。因此，使用时应确保正确设置定位，并合理规划层级结构以避免混乱。
z-index在CSS中常让人摸不着头脑，尤其当你以为它能直接控制层叠顺序的时候，结果却发现有时候完全不起作用。其实，z-index并不是万能的层级开关，它的表现跟元素的定位方式密切相关。
z-index只对定位元素生效
首先必须明确一点：z-index只有在设置了position属性（非static）的元素上才起作用。如果你给一个没有定位的div设置z-index:999，它是不会有任何层级变化的。
比如：
立即学习“前端免费学习笔记（深入）”；
.box {
z-index: 999;
}如果这个.box没设置position: relative、absolute、fixed或sticky，那这个z-index就相当于没写。
所以，使用z-index前，先检查一下目标元素有没有正确地定位。
不同定位方式下的z-index表现差异
不同定位方式的元素虽然都能用z-index控制层级，但它们所处的“战场”并不一样。
- relative和absolute：两者都在普通文档流中占有一席之地（absolute脱离文档流），但它们的z-index是在同一个层级体系里比较的。
- fixed和sticky：fixed是相对于视口定位，sticky则是介于relative和fixed之间的一种状态。它们的层级是独立的，也就是说，即使你给一个absolute元素设置很高的z-index，也可能会被fixed元素盖住，因为它们不在一个层叠上下文中。
举个例子：
你有一个position: fixed的导航栏，还有一个position: absolute的弹窗。如果你没给导航栏设z-index，而弹窗设置了z-index: 1000，那导航栏仍然可能盖住弹窗，因为它默认的层叠层级更高。
层叠上下文影响z-index效果
z-index不是全局唯一的，而是受层叠上下文（stacking context）的影响。每个具有定位属性并设置了z-index的元素，都会创建一个新的层叠上下文。在这个上下文中，z-index值只能与同一父级中的兄弟元素进行比较。
比如：
立即学习“前端免费学习笔记（深入）”；
- 父A设置了z-index: 100；
- 子A1设置了z-index: 999；
- 父B设置了z-index: 50；
- 子B1设置了z-index: 1000；
在这种情况下，父A整体都比父B层级高，所以子A1即使z-index比子B1小，也会显示在子B1之上。
这说明了一个问题：z-index并不是数字越大越靠前，而是要看它所属的上下文层级。
这也解释了为什么有时候你明明写了z-index: 9999，但还是被别的元素盖住了——因为你在错误的“战场”上打了胜仗。
使用建议与常见避坑方法
为了更有效地使用z-index，避免出现“层级混乱”的情况，可以参考以下几个做法：
- ✅ 给使用z-index的元素都加上position: relative，哪怕top/left为0也没关系，这样确保z-index生效。
- ✅ 避免随意乱用超大z-index值（如999999），保持层级结构清晰。
- ✅ 将需要频繁控制层级的组件放在同一个父容器下，这样它们的z-index才有可比性。
- ✅ 对于fixed定位的元素，单独管理其层级，不要和absolute混在一起比较。
- ✅ 使用Chrome DevTools的Computed面板查看元素实际的层叠顺序，帮助调试。
基本上就这些。z-index看起来简单，但要真正用明白，还得理解它背后的层叠机制和定位逻辑。
