flex子项重叠非bug，而是主动触发的视觉效果；最可靠解法是负margin偏移或transform位移配合position与z-index控层，因负margin仅改变paint位置而不影响layout占位，后续元素仍按原位置排布，故易误判“盖不住”。
Flex项目重叠不是bug，而是你主动或被动触发了视觉层叠——最常见、最可控的解法就两条：margin负值偏移，或transform位移配合position和z-index控层。
为什么负margin能重叠但有时“盖不住”？
负margin只挪渲染位置，不改布局占位。后续兄弟元素仍按它“本该在的位置”排布，所以容易误判为失效。
-
margin-left: -20px在flex-direction: row下才有效；列方向得用margin-top: -16px -
gap: 10px和margin-left: -15px叠加时，先抵消gap，再覆盖前一项5px，不是直接盖过去 - 父容器
overflow: hidden会裁掉溢出部分——检查 computed 样式中overflow是否为visible（默认值） - 在
justify-content: center等对齐模式下，负margin可能被Flex引擎“纠正”，不是失效，是主轴重新居中计算导致偏移被抵消
transform位移比margin更干净的场景
当需要动画、响应式微调，或怕负边距影响外边距塌陷、焦点流、屏幕阅读器遍历时，transform是更现代的选择。
-
transform: translateX(-20px)视觉效果类似margin-left: -20px，但不参与盒模型计算，不影响兄弟元素排布 - 它不触发重排（reflow），只走渲染层（paint），性能更好，尤其适合交互动画
- 老版 Safari 需加
-webkit-transform；IE10+ 原生支持 - 搭配
z-index使用时，要检查父级是否含opacity、filter或will-change——这些会意外创建新层叠上下文，让z-index失效
z-index不起作用？先查position
90% 的“谁该在上谁在下”问题，根源是z-index根本没启动。Flex子项默认position: static，此时z-index: 999完全无效。
- 必须显式设
position: relative（或absolute/fixed），z-index才生效 - 两个同级子项：A 设了
position: relative; z-index: 2，B 没设position→ B 永远在 A 下面，哪怕 B 写在 HTML 后面 - 父容器若用了
transform: translateZ(0)（尤其 Chrome），也会创建新层叠上下文，子项z-index被截断 - 调试时建议临时删掉所有
z-index，用浏览器 Layers 面板确认是否真有层叠，还是单纯视觉错觉
别指望order解决重叠
order只改变显示顺序，不控制间距、不改变尺寸、也不影响层叠。设order: -1把某元素提到最前，它仍按默认flex-grow和gap规则占位。
-
order值相同时，元素严格按 HTML 顺序排列，不会自动吸附或合并 - 配合
flex-wrap: wrap时，order只在单行内生效；换行后新行从左到右重新按order排序，容易产生意外交错 - 想让按钮浮在卡片右上角？
order做不到，得用position: absolute+z-index
最容易被忽略的是：重叠常发生在你同时启用gap和负margin、又没关掉overflow: hidden，或者忘了给z-index配position——三者混在一起调，反而掩盖哪个环节卡住了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
