z-index没效果最常见原因是父容器创建了层叠上下文，导致子元素z-index只在该上下文中生效；它仅对position为relative、absolute、fixed或sticky的元素有效，且比较基于层叠上下文而非全局数值。
z-index 为什么设置了没效果
最常见的情况是 z-index 没起作用，并不是写错了，而是父容器触发了新的层叠上下文（stacking context）。只要父元素有 transform、opacity 小于 1、filter、will-change 或 position 非 static 且设置了 z-index（哪怕为 auto），它就会成为层叠上下文根节点——子元素的 z-index 只在该上下文内生效，无法和外部元素比高低。
验证方法：打开浏览器开发者工具，选中元素，看「Computed」面板里 z-index 是否显示为 auto 或具体数值；再往上逐级检查父级是否创建了层叠上下文。
z-index 生效的前提条件
z-index 只对「定位元素」有效，也就是 position 值为 relative、absolute、fixed 或 sticky 的元素。对 static 元素设置 z-index 完全无效，CSS 会直接忽略。
- 想让普通块级元素（如
div）受z-index控制，至少加一句position: relative; - 用
position: absolute时，注意它会脱离文档流，可能影响布局，不是所有场景都适合 -
position: sticky的z-index行为和relative类似，但只在粘性生效区域内参与层叠
z-index 数值比较的常见误区
z-index 的比较不是全局“谁大谁在前”，而是按层叠上下文分组比较。两个同级元素即使 z-index 差值极大（比如 9999 vs 1），若它们属于不同层叠上下文，实际显示顺序仍由各自父上下文的层级决定。
立即学习“前端免费学习笔记（深入）”；
