z-index仅对已定位元素（position为relative/absolute/fixed/sticky）生效；未定位元素设置z-index无效；层叠上下文会限制z-index比较范围，其由opacity
z-index 只对定位元素生效
如果你给一个 div 设置了 z-index: 999 却没效果，大概率是因为它没开启定位。z-index 不是“全局层级开关”，它只作用于「已定位元素」——也就是 position 值为 relative、absolute、fixed 或 sticky 的元素。
常见错误：
- 直接给
position: static（默认值）的元素设z-index，完全无效 - 用
position: relative但没写top/left等偏移，误以为“没定位”，其实已满足 z-index 生效条件
正确做法：
/* ✅ 生效 */
.box {
position: relative;
z-index: 10;
}
/* ❌ 不生效 */
.box {
z-index: 10;
}
层叠上下文（stacking context）会截断 z-index 比较范围
父元素一旦形成新的层叠上下文，子元素的 z-index 就只在该父容器内部比较，不再和外部兄弟元素比大小。哪些属性会创建层叠上下文？
立即学习“前端免费学习笔记（深入）”；
-
position: relative/absolute/fixed/sticky+z-index值不为auto -
opacity小于 1（如opacity: 0.99） -
transform不为none（如transform: translateZ(0)） -
filter不为none -
will-change指定上述任一属性
典型陷阱：
如果
.modal 有 opacity: 0.99，那么即使 .content 设 z-index: 9999，也永远盖不住外部 .sidebar（因为 .modal 自身 z-index 是 1，整个上下文被压在 .sidebar 下面）。
z-index 数值比较只在同层叠上下文中有效
两个元素即使数值差很大，只要不在同一个层叠上下文里，就无法直接比大小。比如：
- A 元素：父容器无层叠上下文，
z-index: 100 - B 元素：父容器有
opacity: 0.99（自动创建上下文），自身z-index: 9999
结果是 A 仍可能盖住 B —— 因为 B 所在上下文的整体层级由其父容器决定，而那个父容器的层叠等级可能很低。
调试建议：
- 用浏览器开发者工具的「Layers」面板（Chrome）或「Box Model」中悬停查看 stacking context
- 临时删掉父级的
opacity、transform等属性，确认是否是它们触发了意外的上下文 - 避免嵌套多层带 z-index 的定位容器，容易失控
position: fixed 和 position: absolute 的 z-index 行为差异
两者都受 z-index 控制，但参考系不同，导致实际覆盖关系更难预测：
-
position: absolute的层叠上下文由**最近的已定位祖先**决定；若无，则相对于初始包含块（通常是） -
position: fixed始终相对于**视口（viewport）**，但它依然会被其父级的层叠上下文限制 —— 比如父元素有transform: scale(1)，就会把 fixed 子元素也拖进新上下文里
最常踩的坑：
.parent {
transform: translateZ(0); /* 创建新层叠上下文 */
}
.child {
position: fixed;
z-index: 9999;
}此时
.child 不再相对于视口定位，而是被锁死在 .parent 的上下文中，且可能被裁剪或错位。
层叠上下文不是显式声明出来的，而是由 CSS 属性隐式触发的。你改一个 opacity，加一个 will-change，甚至只是升级了 Chrome 版本，都可能让原本好好的 z-index 突然失效。排查时优先看父级有没有“看起来无关紧要”的视觉属性。
