z-index仅在同层叠上下文中生效，父级设置opacity
定位元素覆盖内容，本质是层叠上下文（stacking context）中 z-index 优先级没理清。不是加了 position 就能靠 z-index 随意控制谁在上——它只在**同一个层叠上下文内有效**。
确认父容器是否意外创建了新层叠上下文
如果一个定位元素的父级设置了 opacity 、<code>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 不复杂，但容易忽略层叠上下文这个隐形门槛。理清“谁跟谁比”，问题就解决一大半。
