17370845950

z-index仅在同层叠上下文中生效，父级设置opacity

定位元素覆盖内容，本质是层叠上下文（stacking context）中 z-index 优先级没理清。不是加了 position 就能靠 z-index 随意控制谁在上——它只在**同一个层叠上下文内有效**。

确认父容器是否意外创建了新层叠上下文

如果一个定位元素的父级设置了 opacity 、transform、filter、will-change 或 isolation: isolate，就会创建独立的层叠上下文。此时子元素的 z-index 只在这个“小世界”里比大小，再高也盖不过外部同级元素。

• 检查覆盖元素及其祖先是否有上述触发属性
• 临时移除 opacity: 0.99 或 transform: translateZ(0) 看是否恢复预期层级
• 如需保留视觉效果，可把需要提层的元素移到更高层级的容器中（比如直接挂到 body 下）

确保 z-index 有作用前提：必须配合定位

z-index 对 static 元素完全无效。常见误区是给普通 div 写了 z-index: 999 却没设 position: relative/absolute/fixed/sticky。

• 检查目标元素是否已声明有效的 position 值（static 不行）
• 避免用 position: relative 却忘记位移——它不改变布局流，但能激活 z-index
• 若只是想提层不移动，写 position: relative; z-index: 10; 即可

合理设置数值，避免“盲目堆高”

不用非得写 z-index: 999999。只要保证在当前层叠上下文中比对手大就行。建议按功能分层约定：

立即学习“前端免费学习笔记（深入）”；

• 基础层：z-index: 0 ~ 10（如页面主体、卡片）
• 浮层/弹窗：z-index: 100 ~ 200（如 modal、tooltip）
• 全局提示/加载遮罩：z-index: 1000+（如 toast、loading overlay）

调试技巧：快速定位层叠问题

在浏览器开发者工具中，勾选“Layers”面板（Chrome）或“3D View”（Firefox），能直观看到哪些元素形成了层叠上下文，以及它们的渲染顺序。

• 右键元素 → “Show layers” 查看是否被包裹在独立层中
• 在 Styles 面板中观察 z-index 是否灰掉（表示未生效，大概率缺 position）
• 临时给可疑父级加 outline: 1px solid red，确认结构嵌套关系

基本上就这些。z-index 不复杂，但容易忽略层叠上下文这个隐形门槛。理清“谁跟谁比”，问题就解决一大半。