z-index生效的前提是元素必须为定位元素（position不为static）；其数值仅在同一层叠上下文中可比；父元素触发新层叠上下文会限制子元素层级范围；同级元素按DOM顺序或显式z-index决定堆叠顺序。

z-index 要起作用，前提是元素必须是定位元素——也就是说，position 不能是 static（默认值）。只要设了 relative、absolute、fixed 或 sticky，z-index 才能真正控制前后顺序。

定位是 z-index 生效的硬性前提

没加定位，写再多 z-index 都无效。常见误区就是给一个普通 div 直接写 z-index: 999，但 position 还是默认的 static，结果完全没反应。

• 用 position: relative 最安全：不脱离文档流，适合微调或作为子绝父相的父容器
• position: absolute 适合脱离流的精确定位，但必须确保有已定位的父级作参考
• position: fixed 对应视口固定，常用于导航栏、返回顶部按钮等
• 哪怕只是想启用 z-index，也建议至少加 position: relative，不改布局还能解锁控制权

z-index 数值不是“越大越好”

数值只在**同一层叠上下文内**才有可比性。两个元素即使 z-index 差 1000，如果分属不同上下文，高值也可能被低值“压制”。

• 基础内容区域常用 z-index: 0 或 1
• 导航栏、悬浮按钮设为 10–50 比较合理
• 模态框、全屏遮罩推荐 100–1000，避免和第三方组件冲突
• 尽量不用 9999 这类魔法数字，后期维护容易踩坑

层叠上下文才是隐藏关键

一旦父元素触发了新的层叠上下文，它的所有子元素就只能在这个“小世界”里比高低，再高的 z-index 也冲不出去。

• 常见触发条件：opacity
• 比如父容器设置了 opacity: 0.99，那它内部 z-index=999 的弹窗，依然可能被外部 z-index=2 的导航栏盖住
• 调试时打开浏览器开发者工具的“Layers”面板，能直观看到层级分组

同级元素的兜底规则

当多个定位元素 z-index 相同，或者都没设 z-index（即 auto），浏览器按 DOM 顺序决定谁在上——后写的覆盖先写的。

• 这个规则常被忽略，却能快速解决“明明 z-index 一样，为什么 A 盖不住 B”的问题
• 如果不想依赖 HTML 顺序，就统一显式设置 z-index，哪怕只是 z-index: 0 和 z-index: 1
• 负值 z-index（如 -1）会让元素沉到普通流内容下方，适合做底层蒙版或背景装饰