z-index不生效主因是未进入层叠上下文；需定位元素且自身或祖先创建层叠上下文，注意transform等隐式创建、兄弟元素共同祖先未定位、z-index:auto无效、浮动干扰布局、多绝对定位堆叠逻辑及iOS Safari特殊表现。
z-index 不生效的常见原因
元素加了 z-index 却没效果，大概率是因为它没进入「层叠上下文」。只有定位元素（position 为 relative、absolute、fixed 或 sticky）且自身或祖先创建了层叠上下文，z-index 才起作用。
容易踩的坑：
- 父容器用了
transform、opacity、filter等属性，会隐式创建新层叠上下文，导致子元素的z-index只在该上下文中比较，而非全局 - 两个兄弟元素都设了
z-index，但它们的最近共同定位祖先没设position: relative，此时层叠顺序由 HTML 流顺序决定，不是靠z-index -
z-index: auto（默认值）不参与层叠比较，必须显式设为数字
浮动元素导致定位元素错位重叠
当 float 元素和 position: absolute 元素共存时，后者会脱离文档流，但它的定位参考点可能被浮动元素干扰——尤其当父容器没清除浮动，高度塌陷，造成绝对定位元素“浮”到意外位置，视觉上重叠。
解决方式不是硬调 z-index，而是先稳住布局：
立即学习“前端免费学习笔记（深入）”；
- 给浮动元素的父容器加
overflow: hidden或overflow: auto（触发 BFC，自动清除浮动） - 用伪元素清除：
::after { content: ""; display: table; clear: both; } - 避免在同一个容器内混用
float和absolute；现代布局优先用flex或grid替代浮动
多个绝对定位元素堆叠顺序混乱
多个 position: absolute 元素默认按 HTML 出现顺序层叠（后写的在上），但一旦加了 z-index，就按数值大小比，数值大的在上。问题常出在「以为设了就能管全局」。
实操建议：
- 统一设置基准层叠容器：给所有相关定位区域的直接父元素设
position: relative和一个基础z-index（如z-index: 0），再在子元素上设相对值（1、2、-1） - 避免跨层级乱设大数：比如弹窗设
z-index: 9999，结果被某个中间容器的z-index: 10000挡住，不如分层管理（modal: 100、tooltip: 90、header: 80） - 用浏览器开发者工具检查「Layers」面板，看实际层叠上下文结构，比猜更准
移动端 Safari 中 z-index 表现异常
iOS Safari 对层叠上下文更敏感，尤其在使用 transform: translateZ(0) 或 will-change: transform 提升为合成层时，会强制创建新层叠上下文，让 z-index 失效范围变小。
排查要点：
- 移除不必要的
transform或will-change，尤其在父级上 - 确认
meta viewport设置正确（width=device-width），否则缩放可能导致渲染层错乱 - 真机调试比模拟器更可靠；Safari 开发者工具中启用「Show Paint Rectangles」可观察图层划分
重叠问题本质是层叠上下文 + 定位流 + 渲染层三者没对齐，调 z-index 前，先确认你是在跟谁比、在哪一层里比。
