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 进入层叠计算流程。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• 它不会像 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 上。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！