根本原因是父容器未设position: relative，导致absolute子项以body为定位基准；z-index需配合非static定位才生效；层叠上下文（如transform）会限制z-index作用范围。
Flex子项加了position: absolute却“飞出”容器
根本原因不是Flex不兼容position: absolute，而是父容器没设position: relative。一旦子项设为absolute，它就脱离flex流，定位基准变成「最近已定位祖先」——如果父容器是static（默认），浏览器会一路往上找，最终以为参考点。
实操建议：
- 给Flex容器显式加
position: relative，哪怕其他样式都不需要 - 检查祖先链里有没有意外的
position: relative，它可能偷偷成了新定位上下文 - 在DevTools中选中该子项 → Computed → 查看
offsetParent，确认定位基准是否如你所想
z-index写了但完全没反应
90%的情况是元素没定位：z-index只对position值为relative、absolute、fixed或sticky的元素生效。Flex子项默认是static，此时写z-index: 999等于没写。
常见错误现象：
立即学习“前端免费学习笔记（深入）”；
- 两个Flex子项分别设
z-index: 1和z-index: 2，顺序不变 - 用Vue/React动态加class时，只加了
z-index类，漏掉position类
临时验证法：在DevTools Styles面板里手动勾选position: relative，看z-index是否立刻生效。
子项z-index被“锁死”在父容器内
不是数值不够大，而是父容器（或其任意祖先）触发了层叠上下文。只要父元素有opacity: 0.99、transform、filter、will-change等属性，就会创建独立堆叠环境，子项的z-index只能在该范围内比较。
排查与修复：
- 在Chrome DevTools的Layers面板里看是否多了一层“Stacking Context”
- 临时移除父元素的
transform或opacity，观察覆盖关系是否恢复 - 若必须保留那些样式，可把要突出的组件提到Flex容器外（如用React Portal渲染到
下）
视觉重叠其实是margin负值或align-items误用
Flex本身不导致重叠，但margin-left: -12px会让元素向左“画”出一段距离，而原始布局占位没变，后续兄弟仍按原位置排布，造成视觉覆盖；同样，多个空<div>只加<code>justify-content: center，它们会全缩在主轴中心点上，看起来像叠成一个点。
关键细节：
-
flex-direction: row下用margin-left，column下得用margin-top，方向反了就偏不到预期位置 -
gap和负margin会先抵消：比如gap: 10px+margin-left: -15px，实际覆盖前一项5px -
order只改变显示顺序，不控制间距或层叠，别指望它“拉近”两个元素
position、z-index、层叠上下文三者状态不匹配的结果**。调试时别只盯着数值，先确认每个属性当前是否处于“可工作状态”。
