z-index无效是因为flex子项默认static定位，必须配合position:relative等非static值才生效；所谓重叠多由flex自身布局行为（如溢出、压缩）导致，而非层叠问题。
flex子项重叠时，z-index为什么无效
因为 z-index 只对「定位元素」生效（即 position 值为 relative、absolute、fixed 或 sticky），而 flex 子项默认是 static 定位。哪怕你写了 z-index: 999，只要没配 position，它就完全不参与层叠上下文计算。
常见错误现象：z-index 设了但视觉上毫无变化；用开发者工具检查发现元素堆叠顺序和预期相反；父容器加了 z-index 也无济于事。
- 必须同时设置
position: relative（最常用）或其它非static值 - 父级 flex 容器不需要
position，但若它本身被其它元素遮挡，需检查它的层叠上下文是否被截断 - 多个子项都设了
position+z-index，才真正进入比较——否则按 DOM 顺序层叠
flex布局下元素“视觉重叠”的真实原因
很多所谓“重叠”，其实不是 z-index 问题，而是 flex 自身行为导致的：比如 flex-wrap: nowrap 下内容溢出、min-width: auto 被忽略、或者 align-items/justify-content 把多个子项挤到同一区域。
使用场景：卡片列表横向滚动、表单控件错位、图标文字压在一起。
- 先关掉所有
z-index，用浏览器「渲染层」面板（Layers tab）确认是否真有层叠，还是单纯视觉错觉 - 检查
flex-shrink：默认为 1，子项可能被压缩到看不见，看起来像“被盖住” - 检查
overflow：父容器设了overflow: hidden，子项超出部分被裁剪，误判为重叠 - 用
outline: 1px solid red临时描边，看清每个子项实际占位
flex子项需要绝对定位时的兼容性陷阱
一旦给 flex 子项加 position: absolute，它就脱离 flex 流，不再受 justify-content、align-items 控制——但父容器仍需是相对定位，否则绝对定位会相对于视口或最近定位祖先。
性能影响：频繁切换 position 值可能触发重排；在 flex 容器中混用绝对定位和 flex 项目，会让布局逻辑变脆弱。
- 务必给 flex 容器加上
position: relative，否则绝对定位子项可能飞到页面任意位置 -
top/left等偏移值，是以 flex 容器的 padding box 为参考，不是 content box - IE11 对 flex + absolute 的支持不一致，
align-items: center可能失效，建议降级用margin: auto - 不要依赖
z-index来“修复”布局错乱——先回归 flex 本意：用order、flex-basis、gap调整顺序和间距
调试重叠问题的最小可行步骤
别一上来就翻 MDN 或重写整个 flex 结构。从渲染结果倒推，三步定位根因：
- 打开 DevTools，选中疑似被盖住的元素，看 Styles 面板里
position是什么值；如果不是relative/absolute，z-index就是摆设 - 在 Elements 面板里临时删掉其他兄弟元素，观察目标元素是否“浮现”——如果浮现，说明是 flex 分配空间冲突，不是层叠问题
- 把父容器的
display: flex暂时改成display: block，看是否还重叠；如果消失，问题一定出在 flex 属性组合上（比如flex: 1 0 100%和内容实际宽度冲突）
复杂点在于：flex 的空间分配、定位属性、层叠上下文这三层机制会相互干扰，但每次只改一个变量，就能分清到底是哪一层出了问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
