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; }
让所有元素带半透明红边，直观识别哪些区域真正参与层叠。
以上就是
