flex子元素视觉重叠主因是负margin或未设position导致z-index失效；负margin仅视觉偏移不改布局位置，z-index需配合position:relative等才生效，order属性不控制重叠。
Flex子元素视觉重叠，基本不是Flex“出bug”了，而是你无意中激活了重叠机制——最常见的是用了margin负值，或误以为position属性在默认状态下能控制层叠。
负margin让元素“画错地方”，但布局位置没变
给Flex子项加margin-left: -12px或margin-top: -8px，它只是视觉上左移/上移，layout position（参与flex计算的位置）完全不变。后续兄弟元素仍按它“本该在的位置”来排布，于是看起来像盖住了前一个。
- 父容器
overflow: hidden会直接裁掉溢出部分，重叠就看不到了——检查computed样式里overflow是否为visible（默认值） - 在
flex-direction: row下用margin-left才有效；写成margin-top可能毫无反应 -
gap和负margin会互相抵消：比如gap: 10px+margin-left: -15px，实际只覆盖前一项5px - 在
justify-content: center等对齐模式下，负margin可能只闪一下就被重置——这不是失效，是flex容器主动“纠正”了偏离
z-index不生效？先看position有没有设
Flex子项默认position: static，此时z-index: 999完全无效。所谓“谁盖住谁”，根本没启动层叠逻辑。
- 必须显式写
position: relative（或absolute/fixed），z-index才起作用 - 两个同级子项，A设了
position: relative; z-index: 2，B没设position，那B永远在A下面——哪怕B在HTML里写在后面 - 父容器若含
opacity: 0.99、filter: blur(1px)或will-change: transform，会意外创建新层叠上下文，子项z-index被截断 -
transform: translateZ(0)在Chrome中也会触发新层叠上下文，慎用
order属性不会导致重叠，但容易误导判断
order只改变显示顺序，不控制间距、不改变尺寸、也不影响层叠。设order: -1把某个元素提到最前，它还是按默认flex-grow/gap规则占位。
-
order值相同时，元素严格按HTML顺序排列，不会自动吸附或合并 - 配合
flex-wrap: wrap时，order只在单行内生效；换行后新行从左到右重新按order排序，可能产生意外交错 - 想让按钮浮在卡片右上角？
order做不到，得用position: absolute+z-index - 别用
order替代定位——它和重叠无关，混用反而掩盖真正问题
更可控的替代方案：优先用transform位移
当需要稳定偏移又不想干扰布局逻辑时，transform: translateX(-20px)比margin-left: -20px更干净。
- 它不参与盒模型计算，不触发重排，纯渲染层偏移
- 不受
justify-content或align-items重置，动画也更顺滑 - 搭配
z-index使用时，仍需确认没意外创建层叠上下文（检查父级是否含opacity、filter等） - 如果必须用负
margin，建议配合flex-shrink: 0或flex: none减少弹性干扰
真正要实现可控重叠，得拆开处理：用负margin或transform调位置，用position + z-index控层级，order只管顺序——三者混用前，先确认每个属性当前是否处于“可工作状态”。最容易被忽略的是：重叠区域里到底有几个层叠上下文，以及哪个position声明才是真正的“锚点”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
