z-index不生效主因是元素未定位或被父级层叠上下文隔离；必须设position为relative/absolute/fixed/sticky才激活z-index，且opacity<1、transform非none等属性会静默创建新层叠上下文，使子元素z-index仅在内部生效。
z-index 不生效？先确认元素是否脱离文档流
绝大多数“z-index设了没用”的问题，根源不是数值太小，而是元素没真正定位。只有 position 值为 relative、absolute、fixed 或 sticky 的元素，z-index 才会起作用。
常见错误现象：z-index: 9999 写了但完全被盖住；给弹窗加了高值，结果被一个 opacity: 0.99 的父容器挡住。
-
position: static（默认值）下，z-index被浏览器直接忽略 - 哪怕不改变布局，也必须显式写上
position: relative来激活z-index - 如果目标是固定导航栏，
position: fixed已满足定位条件，但依然要配z-index
为什么父容器一设 opacity 就失效？层叠上下文在“偷偷”截断
一旦父元素触发了新的层叠上下文（stacking context），子元素的 z-index 就只在它内部有效，再高也突破不了父级的层级边界。
这些属性会创建新层叠上下文：opacity（小于 1）、transform（非 none）、filter（非 none）、will-change、perspective 等。
立即学习“前端免费学习笔记（深入）”；
- 比如页面顶部有个
header，里面套了个nav，而header设了opacity: 0.99—— 那么nav的z-index: 9999只能跟header内部其他元素比，无法超过header自身在根上下文中的位置 - 调试时打开 Chrome 开发者工具的「Layers」面板，或在「Computed」里搜
stacking context，能快速定位意外创建上下文的节点 - 不要依赖
transform: translateZ(0)强制提升层级——它本身就会新建上下文，反而更难控制
固定导航栏被 absolute 元素覆盖？关键不在谁更“固定”，而在谁先建上下文
position: fixed 元素天然属于根层叠上下文，但若某个 position: absolute 元素的父容器已创建了新上下文且自身 z-index 更高，它就能盖过 fixed 导航栏。
- 解决方法不是堆数值，而是统一锚点：给
body或顶层容器设z-index: 0并position: relative，让它成为所有浮动/固定元素的共同父上下文 - 导航栏建议用
z-index: 1000，弹窗用z-index: 1050，遮罩层用z-index: 1040—— 用清晰区间代替盲目堆砌 - 避免在导航栏父容器上用
transform或opacity，否则fixed行为可能退化（尤其移动端）
“始终顶层”不是靠数字赢，而是靠结构控
硬写 z-index: 2147483647 看似保险，实则埋雷：后续新增组件若也用极大值，就失去排序意义；更麻烦的是，它掩盖了层叠上下文失控的真实问题。
真正可控的做法，是把关键 UI 组件（导航栏、弹窗、提示条）放在同一层叠上下文中，并用明确、递进的 z-index 区间管理它们的相对顺序。一旦发现某处异常覆盖，优先查 opacity、transform 和父级 position，而不是调大数字。
最容易被忽略的一点：即使所有样式都对，如果导航栏 HTML 结构出现在页面底部（比如通过 JS 动态插入），它仍可能因 DOM 顺序被同级元素盖住 —— z-index 只在同级上下文中生效，DOM 顺序仍是底层兜底规则。
