z-index对非定位元素无效，因为position为static时浏览器直接忽略z-index；只有设置position为relative、absolute、fixed或sticky后，z-index才参与层叠计算。
z-index 对非定位元素无效，是因为它根本不会被浏览器解析——只要 position 是 static（默认值），z-index 就等于没写。
为什么 position: static 下 z-index 完全不生效
浏览器在计算层叠顺序时，会先过滤掉所有 position: static 元素，它们被归入“普通流内容”组，不参与 z-index 排序。这不是兼容性问题，而是 CSS 规范强制行为。
-
<div></div>默认就是position: static，哪怕你写了z-index: 9999，DevTools 的 Computed 面板里z-index项也会显示为灰色或标记为 “ignored” -
float、display: flex子项、display: grid子项，这些都不自动激活定位；仅靠它们无法让z-index生效 - JS 动态添加样式时常见错误：
el.style.zIndex = '999'却漏了el.style.position = 'relative'，结果白设
为什么 position: relative 是最安全的兜底方案
加 position: relative 几乎不影响布局：元素仍保留在文档流中，不脱离、不浮动、不改变其他元素位置，但足以让 z-index 进入层叠计算流程。
- 它不会像
absolute那样破坏父容器高度，也不像fixed那样脱离视口滚动上下文 - 即使你不需要偏移（即不写
top/left等），只写position: relative就已满足z-index前提 - Vue/React 中通过 class 切换控制显隐时，确保该 class 包含
position: relative，否则z-index在 class 激活后依然无效
检查和验证是否真生效了
别凭感觉，用 DevTools 实锤确认：
立即学习“前端免费学习笔记（深入）”；
- 选中目标元素 → 右侧面板切换到「Computed」→ 搜索
position→ 确认最终值不是static - 同页面搜索
z-index→ 看它是否显示为有效整数（非灰色、非auto、无单位） - 临时在 Styles 面板里手动加一行：
position: relative→ 刷新观察遮盖关系是否立刻变化
真正卡住人的从来不是 z-index 数字写多大，而是你盯着那个 img 或 div 看了半天，却没拉开 DevTools 查一眼它的 position 计算值是不是还安安静静地躺在 static 上。
