Flex子元素视觉重叠主因是负margin或z-index未配合position启用；order仅改变顺序不引发重叠；需检查overflow、flex-direction匹配、gap抵消及层叠上下文影响。
Flex子元素出现重叠，通常不是Flex本身“允许重叠”，而是你无意中触发了视觉重叠机制——最常见的是用了margin负值，或误判了order属性的作用边界。
负margin导致的视觉重叠：它不改变布局位置，只挪渲染位置
给Flex子项加margin-left: -12px或margin-top: -8px，元素会向左/向上“画”出一段距离，但它的原始布局占位（layout position）没变。后续兄弟元素仍按它“本该在的位置”来排布，于是看起来像盖住了前一个。
- 这种重叠是纯视觉错觉，元素仍参与flex主轴/交叉轴对齐计算
-
overflow: hidden的父容器会裁掉溢出部分，导致重叠失效——记得检查父容器overflow是否为visible（默认值） - 在
flex-direction: row下用margin-left，在column下用margin-top，方向反了就偏移不到预期位置 - 如果同时有
gap，负margin会先抵消gap，再开始覆盖；比如gap: 10px+margin-left: -15px，实际覆盖前一项5px
order属性不会造成重叠，但可能让你误以为“挤在一起”
order只决定显示顺序，不控制间距或层叠。设order: -1把某个元素提到最前，它还是按默认flex-grow/flex-shrink和gap规则占位——除非你同时删了gap或缩窄了宽度，否则它不会“贴上去”。
-
order值相同时，元素仍按HTML顺序排列，不会自动合并或吸附 - 配合
flex-wrap: wrap时，order只在单行内生效；换行后新行从左到右重新按order排序，容易产生意外交错 - 别用
order替代定位：想让按钮浮在卡片右上角？order做不到，得用position: absolute+z-index
z-index在Flex里不生效？先看position有没有设
很多“重叠后谁在上”的问题，本质是z-index压根没启动。Flex子项默认position: static，此时设z-index: 999完全无效。
- 必须显式写
position: relative（或absolute/fixed），z-index才起作用 - 两个同级Flex子项，A设了
position: relative; z-index: 2，B没设position，那B永远在A下面——哪怕B在HTML里写在后面 - 父容器设了
transform、filter或will-change，可能意外创建新的层叠上下文，导致子项z-index被截断
真正要实现可控重叠，得拆开处理：用margin负值调位置，用position + z-index控层级，order只管顺序——三者混用前，先确认每个属性当前是否处于“可工作状态”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
