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 < 1、transform 不为 none、position + z-index 为具体数值、flex/grid 子项带 z-index
- 比如父容器设置了
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）会让元素沉到普通流内容下方，适合做底层蒙版或背景装饰
