z-index不生效最常见原因是父容器创建了新的层叠上下文，导致子元素z-index仅在内部生效；应检查并移除opacity、transform等触发属性，或统一祖先级定位与z-index管理。
绝对定位元素盖住了其他内容，z-index 不生效？
最常见原因是父容器形成了新的层叠上下文（stacking context），导致子元素的 z-index 只在该父容器内部比较，对外“失效”。比如父元素设置了 opacity: 0.99、transform: translateZ(0)、filter: blur(1px)，哪怕只是 will-change: transform，都可能触发新层叠上下文。
实操建议：
- 用浏览器开发者工具检查遮挡元素及其所有父级，看是否有样式意外创建了层叠上下文（Elements 面板里右键 → “Show stacking context”）
- 优先移除可疑的
opacity、transform、filter等属性，确认是否恢复层级预期 - 若必须保留这些效果，就让遮挡元素和被遮挡元素处于同一层叠上下文：把它们共同的最近非层叠上下文祖先设为
position: relative并统一管理z-index
多个 absolute 元素之间怎么控制谁在上谁在下？
同级绝对定位元素的默认堆叠顺序由 HTML 出现顺序决定：后写的在上面。但一旦加了 z-index，就按数值大小比——注意，只对已定位元素（position 为 relative、absolute、fixed 或 sticky）有效。
实操建议：
-
z-index值可以是任意整数（正、负、零），不需要连续，但别用太大的数（如999999），后期维护容易冲突 - 避免混用无值和有值：
z-index: auto（默认）和z-index: 0行为不同——前者不创建层叠上下文，后者会 - 如果两个元素都设了
z-index，但一个父容器有层叠上下文而另一个没有，它们根本不在同一层级比，结果不可预测
fixed 定位弹窗被 absolute 导航栏盖住？
这是因为 position: fixed 元素的层叠上下文默认比普通 position: absolute 更高，但前提是没被父级干扰。实际中，很多 UI 框架或重置样式会给 body 或 html 加 transform 或 opacity，无意中让整个页面降级为一个低层级上下文。
实操建议：
- 给
body加transform: translateZ(0)是常见“修复”，但它本身就会创建层叠上下文——不如直接给弹窗容器加z-index: 1000，并确保其父级（比如body）没有意外触发层叠上下文 - 检查框架 CSS（如 Ant Design、Element Plus）是否全局设置了
body { will-change: transform }，这类配置要删或覆盖 - 弹窗类组件建议自带一层
position: relative+z-index的 wrapper，不依赖外部环境
移动端 Safari 里 z-index 失效特别多？
是的。iOS Safari 对层叠上下文更敏感，尤其在 overflow: scroll 容器、input 聚焦时软键盘弹出、甚至某些 iframe 场景下，会临时重排层叠顺序。它还曾长期不支持 z-index 在 transform 元素上的稳定表现。
实操建议：
- 避免在可滚动区域（
overflow-y: auto）内嵌套多层position: absolute+z-index，改用position: sticky或 flex 布局模拟 - 测试时务必真机连 Safari 开发者工具，模拟器和桌面版 DevTools 层叠行为差异很大
- 对关键浮层（如日期选择器、下拉菜单），加
backface-visibility: hidden和transform: translateZ(0)有时能强制触发硬件加速并稳定层级
层级问题从来不是单靠调大 z-index 就能解决的；真正卡住人的，永远是那个没被注意到的 opacity: 0.999 或一行 will-change: transform。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
