z-index仅对position为relative、absolute、fixed或sticky的元素生效，static下完全被忽略；父级若创建层叠上下文（如opacity
因为 z-index 根本不作用于非定位元素——浏览器会直接忽略它，不是“效果弱”，是压根不参与层叠计算。
非定位元素的 position 是 static，z-index 被静默丢弃
所有 HTML 元素默认 position: static，这是唯一一个让 z-index 完全失效的定位值。此时无论你写 z-index: 9999 还是 z-index: -1，开发者工具的「Computed」面板里 z-index 项都会显示为灰色（表示被忽略），position 值也始终是 static。
- 常见误操作：只加
z-50（Tailwind）或z-index: 100，漏掉relative/absolute等定位类或声明 - JS 动态添加样式时，只改
z-index，没同步设置position - 误以为
display: flex子项天然支持z-index—— 实际上它确实能响应（因 flex item 是定位上下文中的“参与方”），但前提是父容器没意外创建隔离上下文，且子项本身仍需是定位元素才能主动控制层级
定位属性必须显式声明，且不能是 static
z-index 只对 position 值为 relative、absolute、fixed 或 sticky 的元素生效。其中 relative 最常用，因为它几乎不改变布局，只“激活”层叠能力。
-
float不触发定位，加了也白加；必须额外配position: relative -
display: inline元素即使加了position: relative，也可能因行内特性导致层叠行为异常，建议同步设display: inline-block或block - 检查方法：打开 DevTools → 选中元素 → Computed 面板搜
position，确认值不是static
父级层叠上下文会锁死子元素的 z-index 比较范围
即使你给子元素正确设置了 position: absolute 和 z-index: 9999，只要它的任意一个祖先元素满足以下任一条件，就会创建独立的层叠上下文（stacking context），把子元素的 z-index “关进盒子”里：
-
opacity小于 1（比如opacity-99） -
transform不为none（哪怕只是transform: translateZ(0)或scale(1)） -
filter、will-change、isolation: isolate、backdrop-filter -
position: fixed或sticky（即使没设z-index）
此时子元素的 z-index: 9999 只能跟同个父容器下的兄弟比高低，无法越级覆盖外部元素——就像两个不同微信群里的人，再高的群昵称权重也影响不了另一个群的发言顺序。
真正难的不是写对 z-index，而是往上翻 DOM 找“结界”
很多问题表面看是子元素层级不够，实际是某个没写 z-index 的父容器悄悄用 transform 或 opacity 切断了层叠链路。调试时别只盯着目标元素调数值，得用 DevTools 逐级点击父节点，看「Computed」里 Stacking context 是否标为 Yes。最容易被忽略的，是那些“看起来只是加了个动效、没动布局”的父级样式。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
