Flex子项z-index失效主因是未进入有效层叠上下文：需显式设置position（如relative）且父级未用opacity/transform等触发新上下文，否则z-index仅在局部生效。
Flex子项的z-index失效，几乎从不因为数值写小了，而是它根本没进入有效的层叠上下文——要么自己没定位，要么被父级或祖先“关进盒子”里了。
Flex子项必须显式设置position才能响应z-index
Flex容器本身不赋予子项定位能力。即使子项在flex流中排得再整齐，只要position还是static（默认值），z-index就完全被浏览器忽略——连解析都不会解析。
- 常见错误：
.item { z-index: 999; }漏掉position: relative或其他定位值 - Vue/React中动态加class时，容易只加了
z-index类，却没同步加position类 - 临时验证法：在DevTools的Styles面板里手动勾选
position: relative，看z-index是否立刻生效 -
position: sticky受滚动边界限制，超出后会退化为relative，此时z-index行为可能突变
Flex容器或其祖先触发了层叠上下文
Flex布局本身不创建层叠上下文，但一旦容器或任意上级元素设置了opacity、transform、filter等属性（哪怕只是opacity: 0.99或transform: translateZ(0)），就会把整个子树“关进一个盒子”，子项的z-index只能在该盒子内部比大小。
- 典型场景：带淡入动画的卡片（
opacity: 0.99）、用transform做平滑位移的导航栏、加了backdrop-filter的弹窗外层 - 快速定位：Chrome DevTools Elements面板中逐级点击父节点，右侧面板Layout标签页下看“Stacking context”是否突然变成
Yes - 别只改子项：如果父容器已触发上下文，给子项设
z-index: 9999没用；得给那个父容器本身加z-index（比如z-index: 100）来提升整块区域 -
z-index: 0和z-index: auto效果不同——前者会显式创建新上下文，后者不会（前提是元素已定位）
Flex子项上的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，确保父Flex容器未触发上下文，且该子项没叠加其他触发属性（如opacity） - 特别注意：
flex或grid容器中，子项一旦设了z-index（非auto），也会触发上下文——这点常被忽略
真正难的不是调哪一行CSS，而是意识到：z-index不是独立变量，它是嵌套在层叠上下文树里的相对值。每次想加个9999前，先往上点三下DevTools——那个突然标红的Stacking context: Yes才是你该修的地。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
