flex子项z-index无效的根本原因是未进入层叠计算流程：需显式设置position（如relative）；祖先或自身触发层叠上下文（如opacity、transform）会限制z-index作用范围。
Flex子项的z-index不是“不能用”，而是写了也常无效——根本原因不是语法错，而是它没进入浏览器的层叠计算流程。
子元素没设position，z-index直接被忽略
Flex子项默认position: static，此时无论写z-index: 9999还是z-index: -1，浏览器连解析都不解析，DevTools里z-index字段会灰显或标为(not applicable)。
- 必须显式加
position: relative（或其他非static值），z-index才开始参与计算 - Vue/React中动态切换class时，容易只加
z-index类，漏掉position类，导致样式不生效 - 临时验证：在DevTools Styles面板里手动勾选
position: relative，看z-index是否立刻起效
父容器或祖先触发了层叠上下文，子项z-index被“关进盒子”
Flex容器本身不创建层叠上下文，但只要它的任意祖先（不一定是直接父级）设置了opacity、transform、filter等属性，就会形成一个“结界”，子项的z-index只能在该结界内比大小，无法跨出去和外部元素竞争。
- 常见触发点：
opacity: 0.99、transform: translateZ(0)、filter: blur(0)、will-change: transform - Chrome DevTools中逐级点击父节点，在右侧面板
Layout标签页下看Stacking context是否突然变成Yes - 临时注释掉可疑父级的
transform或opacity，遮挡关系若立刻恢复，就定位成功
子项自己加了transform，悄悄截断了z-index作用域
给Flex子项加position: absolute和z-index后，如果同时用了transform（哪怕只是transform: scale(1)或translateX(0)），它会立即创建一个新的层叠上下文，导致该子项的z-index只对其内部后代有效，无法和同级兄弟比高低。
- 错误写法：
.item { position: absolute; z-index: 10; transform: rotate(0); } - 更稳妥的替代：
top/left代替transform做位移；若必须用transform，确保父容器未触发上下文，且该子项没叠加其他触发属性（如opacity） - 特别注意：
flex或grid容器中，子项一旦设了z-index（非auto），也会触发上下文——这点常被忽略
真正难的不是调哪一行CSS，而是意识到z-index不是独立变量，它是嵌套在层叠上下文树里的相对值。每次想堆高数值前，先往上点三下DevTools，那个突然标红的Stacking context: Yes才是你该修的地。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
