z-index 对 position: static 元素完全无效，因其不参与层叠计算；必须配合 position: relative/absolute/fixed 才生效，且受父级层叠上下文和 dom 顺序共同制约。
z-index 对 position: static 元素完全不读取，不是“没效果”，而是压根不参与层叠计算。
为什么浏览器直接忽略你的 z-index
所有元素默认都是 position: static，这是 CSS 规范定义的“非定位元素”。只要 position 是这个值，z-index 就像写在注释里一样——解析器跳过、渲染引擎无视、开发者工具里 z-index 甚至可能显示为 auto（即使你写了 999）。
常见错误现象：
- 给按钮加了
z-index: 9999，但它仍被背景视频盖住 - Vue 中用
:class动态切换样式，只改了z-index，忘了同步设position - CSS 框架重置规则（如 Normalize.css）把某些标签的
position设回static，覆盖了你之前的声明
实操建议：
- 打开开发者工具 →「Computed」面板 → 搜
position，确认最终值不是static - 最小验证：临时加一行
position: relative（几乎不影响布局），再看z-index是否立刻生效 - 避免依赖继承：
position不可继承，子元素必须显式声明
flex/grid 子项写了 z-index 却没反应
很多人误以为 display: flex 或 display: grid 的子项“天然支持层叠”，其实不然。它们的 z-index 只在容器内生效，且前提是该子项本身是已定位元素。
使用场景：
- 模态框里的关闭按钮需要浮在内容上方
- 轮播图中多个
img需按顺序叠放
关键点：
- 仅设置
z-index不够，必须同时设position: relative（或absolute等） - 如果父容器是
flex，子项设position: absolute后会脱离 flex 流，此时justify-content等不再影响它 - 想让绝对定位子项仍“锚定”在 flex 容器内？先给父容器加
position: relative
父级触发了新层叠上下文，z-index 被锁死
即使你给目标元素正确设置了 position 和 z-index，只要它的任意一个祖先元素满足以下任一条件，就会创建独立层叠上下文，把子元素的 z-index “关进盒子”里：
-
opacity小于1（比如opacity: 0.99） -
transform不是none（哪怕只是transform: translateZ(0)） -
filter、will-change、isolation: isolate、contain: layout paint
后果很隐蔽：子元素的 z-index: 9999 只能跟同个父容器下的兄弟比高低，根本盖不过隔壁 z-index: 1 的弹窗——因为它们不在同一个上下文里。
排查方法：
- 在开发者工具中逐级向上检查祖先元素的「Computed」样式，搜上述属性
- 临时删掉可疑的
opacity或transform，看问题是否消失 - 注意：
position: fixed的父级也会创建新上下文，别只盯着static父级
HTML 结构顺序与父级 z-index 的叠加关系
z-index 不是全局排序器。两个元素若没有共同的已定位祖先，它们的层叠顺序由 DOM 顺序 + 父级层叠上下文共同决定。
举例：
<div class="A" style="position: relative; z-index: 1"> <div class="a" style="position: absolute; z-index: 999"></div> </div> <div class="B" style="position: relative; z-index: 2"> <div class="b" style="position: absolute; z-index: 1"></div> </div>
此时 .b 会盖过 .a，尽管 .a 的 z-index 更高——因为 .B 的 z-index（2） > .A 的 z-index（1），子元素的层级被父级锁死了。
实操建议：
- 涉及多层弹窗/蒙版时，统一管理父容器的
z-index基线（如z-index: 1000弹窗，z-index: 1001蒙版） - 避免在不同层级随意设高
z-index，容易引发“z-index 战争” - DOM 顺序仍有兜底作用：同级未定位元素，后出现的自然覆盖前面的
最常被忽略的一点：z-index 生效链条是“自己定位 + 父级没锁死 + 父级层级够高”，三者缺一不可。调的时候别只盯着一个元素猛加 z-index，得顺着 DOM 往上捋两层。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
