17370845950

z-index仅对定位元素生效，且在各层叠上下文中独立计算；需避免随意堆砌数值，按功能分层预设范围并用CSS自定义属性管理，同时排查裁切与隐藏问题。

z-index 只对定位元素（position 值为 relative、absolute、fixed 或 sticky）生效。如果元素没设定位，z-index 再大也没用。

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

z-index 不是全局排序，而是在每个层叠上下文中独立计算。常见触发层叠上下文的方式有：

• 设置了 opacity 小于 1
• transform 不为 none（如 transform: translateZ(0)
• filter 不为 none
• will-change 设为特定属性
• isolation: isolate
• position: fixed 或 sticky（在某些浏览器中）

一旦父元素创建了新层叠上下文，子元素的 z-index 就只在这个“小世界”里比大小，再高也超不出父级边界。可借助浏览器开发者工具的“Layers”面板或勾选“Paint Flashing”辅助判断。

避免 z-index 值随意堆砌

写成 z-index: 999999 或满屏 !important 是治标不治本，还容易引发后续冲突。建议按功能分层预设范围：

• 基础层：0–10（背景、内容区）
• 弹窗/浮层：100–199（Modal、Tooltip）
• 全局覆盖：1000+（Loading 遮罩、全屏提示）

配合 CSS 自定义属性统一管理更稳妥，例如：--z-modal: 150; --z-toast: 120;，既清晰又易维护。

检查元素是否被意外裁剪或隐藏

有时看似“被盖住”，其实是父容器设置了 overflow: hidden，或祖先元素有 clip-path、mask 等视觉裁切。z-index 再高，超出裁切区域的部分也不会显示。可临时给疑似父容器加 outline 或 background-color 边框，观察实际渲染边界。

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

在开发者工具中选中目标元素，看右侧“Computed”面板里的 z-index 是否生效（非 auto），同时展开 Stacking Context 查看它所属的层叠上下文来源。也可以临时加一句：

* { outline: 1px solid rgba(255,0,0,0.3) !important; }

让所有元素带半透明红边，直观识别哪些区域真正参与层叠。