z-index在Flex子项上不生效主因是元素未定位或父级创建了层叠上下文：必须显式设置position（如relative）才能启用z-index；若父容器有opacity/transform/filter等属性，则会创建独立层叠上下文，使子项z-index仅在该上下文中生效。
z-index 在 Flex 子项上不生效，几乎总是因为两个原因：元素没定位，或父容器（或其祖先）意外创建了层叠上下文。
Flex 项目必须显式设置 position 才能响应 z-index
Flex 容器本身不赋予子项定位能力。即使子项在 flex 流中“看起来”被排好位置，只要 position 是 static（默认值），z-index 就完全被忽略——浏览器连解析都不会解析它。
- 常见错误：只写
z-index: 999，但漏掉position: relative或其他定位值 - Vue/React 中动态加 class 时，容易只加了 z-index 类，没同步加定位类
- 临时验证法：直接在 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） - 调试技巧：打开 Chrome 的 «Layers» 面板（More Tools → Layers），直接看渲染层结构，比单看 CSS 更直观
最隐蔽的问题往往藏在“看似无害”的样式里：一个 opacity: 0.999、一行 will-change: transform、甚至只是 filter: blur(0.1px)，都可能让整套 z-index 逻辑失效。排查时别盯着数字本身，先确认你操作的到底是不是“同一个比较场”。
