子元素用position: absolute时，父容器必须设position: relative，否则其定位基准将回退至最近已定位祖先或body，导致元素“飞出”容器；flex容器也不例外，须显式添加relative才能使absolute子项正确参照父容器定位。
子元素用了 position: absolute 却没给父容器设 position: relative
这是最常被忽略的根源：flex 子项一旦加了 position: absolute，它就彻底脱离 flex 布局约束，定位基准变成「最近已定位祖先」。如果父容器没设 position: relative，浏览器会一路往上找，最终以 <body> 为参考点——结果就是元素“飞”出容器，叠在别处。
必须显式给 flex 容器加 position: relative（哪怕其他样式都不需要），否则 top/left 等偏移值毫无意义。
- IE11 下更危险：
align-items: center可能直接失效，视觉居中完全不可靠 - 不要指望
z-index来“补救”——它解决的是层叠顺序，不是布局错位 - 临时调试时，用开发者工具检查 computed 样式里的
position和offsetParent，确认定位上下文是否如你所想
justify-content: center 或 align-items: center 单独使用导致视觉重叠
justify-content 和 align-items 只负责对齐，不分配空间。如果子元素没尺寸、没弹性、或脱离文档流，它们就会全挤在主轴/交叉轴的中心点上，看起来像叠在一起。
典型错误场景：
立即学习“前端免费学习笔记（深入）”；
- 多个空
<div class="item"></div>，只加了justify-content: center→ 全缩成一个点 - 子项设了
width: 100%但父容器没定宽 → 实际宽度超限，横向挤压重叠 - 用了
flex-direction: column却忘了配align-items，文字在垂直方向“堆”成一团
真正起作用的组合是：display: flex + 明确的 flex-direction + justify-content + align-items + 子项有可计算尺寸（width、flex、内容固有宽高）
混用 flex 和 float 或 position: fixed
flex 容器只对「参与 flex 格式化上下文」的子项生效。一旦子项用了 float 或 position: fixed，它就不再算作 flex 项目，flex 的 order、flex-grow、align-self 全部失效。
这类元素仍占据原始文档流位置（fixed 除外），但视觉上可能覆盖在其他 flex 项上，形成假性重叠。
- 用浏览器开发者工具选中重叠区域，看
display和position的 computed 值是否与预期一致 - 临时删掉可疑的
float或position: fixed声明，观察重叠是否消失 - 若需固定某元素（如悬浮按钮），应把它放在 flex 容器外部，而非作为子项混入
Flex 子项内部触发了新的层叠上下文
即使布局结构没问题，z-index 也可能“看似失效”，本质是层叠上下文（stacking context）被意外创建。比如父容器加了 opacity: 0.99、transform: translateZ(0)、filter: blur(1px)，都会让子项的 z-index 只在该父容器内比较，无法盖过兄弟容器。
更隐蔽的是：transform: translateX() 比负 margin 更安全，但它也会创建新层叠上下文——如果你本意只是微调位置，却顺带锁死了 z-index 的作用域，就容易误判为“重叠无法控制”。
关键判断点：
- 检查父级是否有
opacity、filter、will-change、transform（非translate类） - 避免在列表项、频繁动画的元素上滥用
translateZ(0)，它强制 GPU 加速，低性能设备易卡顿 - 真要隔离层级，优先用
position: relative+z-index组合，而不是靠 transform “骗”上下文
position、display、z-index 这三个属性查，比重写整个布局更快。 
