Flex子项z-index失效主因是层叠上下文限制或position未生效；需确认position非static、父容器未触发隐式层叠上下文（如transform/opacity）、子项自身transform不额外创建上下文，并用DevTools验证渲染层结构。
Flex子项加了position和z-index却还是被盖住，90%不是数值不够大，而是它被锁在某个祖先创建的层叠上下文中出不来——或者position根本没生效。
为什么加了position: relative还是没用
浏览器只对position值为relative、absolute、fixed或sticky的元素计算z-index；static（默认值）下写多少都等于没写。
- 用Chrome DevTools选中元素，在«Computed»面板搜
position，确认最终值不是static - Vue/React中class切换可能覆盖定位声明，比如
.item { position: static; }优先级更高 - JS动态插入时常见错误：
el.style.zIndex = '999'但漏掉el.style.position = 'relative' - 临时验证：直接在DevTools Styles面板勾选
position: relative，看遮挡是否立刻消失
flex容器本身触发了层叠上下文
Flex容器不自动创建层叠上下文，但它自己若带opacity、transform或filter，就会把所有子项关进一个“盒子”里，子项的z-index只能在盒内比大小。
- 典型诱因：
opacity: 0.99、transform: translateZ(0)、filter: blur(0)，哪怕数值看起来“无害” - 在DevTools Elements面板逐级点击父节点，右侧面板«Layout»标签页看«Stacking context»是否突然变成
Yes - 重点盯那些没写
z-index却显示Yes的节点——它们才是静默结界源 - 临时注释掉父容器的
transform或opacity，遮挡消失就坐实问题
子项自己加了transform导致z-index失效
给已定位的flex子项再加transform（哪怕是transform: rotate(0)），会立刻创建新的层叠上下文，使它的z-index只对内部后代有效，无法和同级兄弟竞争。
- 错误写法：
.item { position: relative; z-index: 10; transform: scale(1); } - 更稳妥做法：用
top/left替代transform做微调；必须用transform时，确保父容器没触发上下文，且该子项没叠加opacity等属性 - 调试技巧：打开Chrome的«Layers»面板（More Tools → Layers），直接看渲染层结构，比纯看CSS更直观
移动端iOS Safari的fixed降级陷阱
iOS Safari对body和html上的transform、opacity极其敏感，会导致position: fixed子项退化为absolute，彻底脱离预期层级。
- 快速验证：用Safari Web Inspector或Chrome Remote Debugging，逐级点开
html→body→根容器，看«Computed»里是否有stacking context: yes - 修复优先级：先删
body和html上所有transform、opacity、filter；再确保min-height: 100vh存在 - 如果必须保留动效，把关键浮层（如弹窗）用JS移到
document.body下，并手动用position: fixed+top/left定位
真正难的不是算清哪个z-index该写多少，而是每次改完样式，都要往上多看两层DOM，确认那个刚被激活的transform或opacity没把你需要突出的元素关进盒子。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
