z-index不生效主因是元素未进入层叠上下文；只对定位元素有效，且需在同层叠上下文中比较，父容器未创建新上下文或元素为position:static时均无效。
z-index 不生效的常见原因
直接给元素加 z-index 却没效果，大概率不是写错了值，而是它根本没进入「层叠上下文」。CSS 的 z-index 只对定位元素（position 为 relative、absolute、fixed 或 sticky）有效，且只在同一个层叠上下文中起作用。
- 父容器没有创建新的层叠上下文（比如没设
transform、opacity、filter等触发属性），子元素的z-index就只能跟兄弟元素比，无法跨父级压制其他区域 -
position: static（默认值）的元素无视z-index，哪怕写了也等于没写 - 多个同级元素中，后出现的元素天然盖在先出现的上面（文档流顺序），此时不设
z-index也可能“看起来没重叠”，但不可控
如何可靠地建立层叠上下文
想让 z-index 按预期工作，必须确保目标元素及其父容器处于你可控的层叠层级里。最稳妥的方式是主动创建层叠上下文，而不是依赖默认行为。
- 给父容器加
position: relative+z-index: 0（或任意非 auto 值），这是最轻量、兼容性最好的方式 - 避免用
opacity: 0.99或transform: translateZ(0)触发，它们虽能建上下文，但可能带来意外的渲染副作用（如模糊、滚动失效） - 若涉及模态框、下拉菜单等需要全局置顶的组件，建议统一用一个高
z-index基准（如z-index: 1000），再按功能分层（1010用于遮罩，1020用于弹窗内容）
z-index 数值该设多大才安全
别盲目堆砌 9999、999999 —— 这不仅难维护，还可能被第三方 UI 库（如 Ant Design、Element Plus）的默认值覆盖。关键是建立可推演的层级体系。
- 基础 UI 层：导航栏、固定侧边栏 →
z-index: 100 - 浮动层：Tooltip、Popover →
z-index: 200 - 模态层：Modal、Drawer →
z-index: 300 - 全屏覆盖：Loading 遮罩、权限拦截层 →
z-index: 400 - 所有值保持 10 的倍数，留出空隙方便插值调试
调试重叠问题的实操步骤
遇到重叠，不要立刻改 z-index，先确认渲染树结构是否符合预期。
立即学习“前端免费学习笔记（深入）”；
- 在浏览器开发者工具中选中重叠元素，看右侧面板的
Computed标签页，确认z-index是否计算为实际数值（不是auto） - 检查其最近的「层叠上下文祖先」是谁：往上逐级看
position、transform、opacity等属性，找到第一个非auto的z-index或触发层叠上下文的样式 - 临时给疑似干扰的父容器加
outline: 1px solid red，可视化它的边界和层叠范围 - 如果两个元素属于不同层叠上下文，比较的是各自上下文根元素的
z-index，子元素内部再大也没用
position 却指望 z-index 生效的 div，以及被 opacity: 0.999 暗中劫持了层叠上下文的父容器。 
