flex子元素重叠主因是负margin、z-index未配position或误用order；负margin仅偏移渲染位置不改布局占位，z-index需配合position:relative等才生效，order不控制重叠。
Flex子元素重叠不是Flex“出错”，而是你无意中触发了视觉重叠机制——最常见的是margin负值、z-index未配合position，或误用order。先停掉所有z-index，用outline: 1px solid red描边看真实占位，再逐项排查。
检查负margin是否在“画错位置”
负margin只挪渲染位置，不改布局占位。后续兄弟元素仍按它“本该在的位置”排布，造成盖住前一个的假象。
-
flex-direction: row下用margin-left，写成margin-top无效 -
gap: 10px+margin-left: -15px→ 实际只覆盖前一项5px（先抵消gap） - 父容器
overflow: hidden会裁掉溢出部分，重叠就看不见了——检查computed样式中overflow是否为visible - 在
justify-content: center等对齐模式下，负margin可能被容器“纠正”，不是失效，是Flex主动重置
确认z-index是否真正生效
z-index在Flex子项上默认无效，因为子项默认position: static。没设position，z-index就是摆设。
- 必须显式加
position: relative（或absolute/fixed），z-index才参与层叠计算 - 两个同级子项：A设了
position: relative; z-index: 2，B没设position→ B永远在A下面，哪怕B写在HTML后面 - 父容器含
transform、filter或will-change，会意外创建新层叠上下文，子项z-index被截断 - 调试时临时删掉所有
z-index，用浏览器Layers面板确认是否真有层叠，还是单纯视觉错觉
别指望order解决重叠问题
order只改变显示顺序，不控制间距、不改变尺寸、也不影响层叠。设order: -1把某元素提到最前，它仍按默认flex-grow和gap规则占位。
-
order值相同时，元素严格按HTML顺序排列，不会自动吸附或合并 - 配合
flex-wrap: wrap时，order只在单行内生效；换行后新行从左到右重新按order排序，容易产生意外交错 - 想让按钮浮在卡片右上角？
order做不到，得用position: absolute+z-index - 用
transform: translateX(-20px)替代margin-left: -20px更干净——不参与盒模型计算，不触发重排
优先用gap替代margin控制间距
边框重叠、间隙错乱等问题，多数源于手动管理margin。Flex原生gap属性能统一、无副作用地控制子项间距。
-
.parent { display: flex; gap: 12px; }→ 子项间自动留空，边框不再接触 -
gap不占布局空间，不影响焦点流和屏幕阅读器遍历 - IE全系不支持
gap；Safari 14.1+才支持Flex中的gap（旧版只认Grid） - 兼容性要求高时，降级用
.item + .item { margin-left: -1px; }，但务必把边框宽度抽成CSS变量（如--border-width: 1px），避免媒体查询中漏改
最容易被忽略的点：重叠常不是布局逻辑问题，而是你同时给多个相邻元素写了完整边框，又没用gap或负margin协调——此时描边一看，边界明明没越界，只是两条线紧挨着“加粗”了而已。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
