Flex布局重叠需人为触发，最可靠方式是负margin偏移或transform位移配合position与z-index控层；负margin方向须匹配flex-direction，且父容器overflow需为visible，z-index生效前提为显式设置position。
Flex布局本身不支持“天然重叠”，所谓重叠全是人为触发的视觉效果——最可靠、最可控的方式就两条：margin负值偏移，或transform位移 + position + z-index控层。
用margin负值实现简单重叠
这是兼容性最好、写法最直白的方式，但容易误判“为什么盖不住”或“为什么被裁了”。
-
margin-left: -20px在flex-direction: row下有效；margin-top: -16px才对column起作用——方向错，偏移就失效 - 父容器
overflow: hidden会直接切掉溢出部分，重叠看不出来；检查 computed 样式里overflow是否为visible（默认值） -
gap: 10px和margin-left: -15px叠加时，先抵消gap，再覆盖前一项5px，不是直接盖过去 - 别用过大的负值，否则键盘焦点顺序错乱、屏幕阅读器跳过、小屏下完全挤出视口
transform比margin更干净的偏移方式
当你需要动画、响应式微调，或怕负边距影响其他布局逻辑（比如外边距塌陷），transform是更现代的选择。
-
transform: translateX(-20px)视觉效果类似margin-left: -20px，但不参与盒模型计算，不影响兄弟元素排布 - 它不触发重排（reflow），只走渲染层（paint），性能更好，尤其适合交互动画
- 搭配
z-index使用时，要小心父级是否含opacity、filter、will-change——这些会意外创建新层叠上下文，让z-index失效 - IE10+ 支持，老版 Safari 需加
-webkit-transform
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 下面——HTML 顺序无关 - 父容器若用了
transform: translateZ(0)（尤其 Chrome），也会创建新层叠上下文，子项z-index被截断
真正要稳定控制重叠，得把三件事拆开想清楚：用margin或transform调位置，用position激活z-index，用order只管顺序——混在一起改，反而掩盖哪个环节卡住了。
