z-index不生效主因是元素未定位或层叠上下文干扰；仅对position为relative/absolute/fixed/sticky的元素有效，浮动元素无效，跨层叠上下文时由父级z-index决定顺序。
z-index 不生效的常见原因
z-index 只对「定位元素」（即 position 值为 relative、absolute、fixed 或 sticky）起作用。浮动元素（float: left/right）本身不参与层叠上下文，即使加了 z-index 也完全无效。
- 浮动元素默认处于“普通流层叠层”，不会和定位元素比层级
- 如果父容器没定位，子元素设
z-index可能被父级层叠上下文截断 -
z-index值只在同一个层叠上下文中比较，跨上下文时由父级决定顺序
浮动元素和定位元素重叠时的处理策略
优先把浮动元素改为定位——这是最直接有效的解法。浮动本就不该用于控制层叠，它设计初衷是文字环绕，不是布局控层。
- 把
float: left改成position: relative+left: 0（或用display: inline-block配合vertical-align） - 定位后的元素立刻支持
z-index，可自由调整层级 - 若必须保留浮动（如兼容老代码），需让其父容器建立新层叠上下文：
position: relative+z-index: 0，再给浮动兄弟的定位元素设更高z-index
层叠上下文导致 z-index 失效的典型场景
两个定位元素看似同级，但其中一个的祖先有 z-index（且 position 不为 static），就会提前创建层叠上下文，内部所有元素的 z-index 只在这个小世界里生效。
- 检查父级是否意外设置了
position: relative和z-index - 用浏览器开发者工具的「Layers」面板或「Computed」标签页，看元素实际所属的层叠上下文
- 破局方法：给需要前置的整个模块加统一
position: relative和足够大的z-index，避免被外层压制
替代方案：不用 z-index 也能控制覆盖顺序
CSS 层叠顺序有默认规则，合理利用可减少对 z-index 的依赖：
立即学习“前端免费学习笔记（深入）”；
- 后出现的定位元素默认盖在先出现的上面（文档流顺序）
-
transform、opacity、will-change等属性也会触发层叠上下文，要小心连带影响 - 对纯视觉遮罩类需求（如弹窗蒙层），用
position: fixed+ 全局高z-index（如z-index: 9999）更稳妥，但注意避免和其他库冲突
真正难调的不是数值大小，而是搞不清谁跟谁在一个层叠上下文里。调试时别只盯着 z-index 数字，先看 position 和父级有没有悄悄建上下文。
