z-index在Flex子项上默认不生效，因子项默认position: static且需满足两个硬性条件：①显式设置非static的position（如relative）；②未被父级层叠上下文隔离（如opacity
z-index 在 Flex 子项上默认不生效，除非满足两个硬性条件
Flex 容器本身不会阻止 z-index 生效，但子元素必须同时满足：① position 不为 static；② 所在层叠上下文允许其参与 Z 轴排序。很多开发者只加了 z-index: 999，却漏掉 position: relative，结果就是值写了也白写。
常见错误现象：z-index 在 DevTools 的 Computed 面板里显示为 auto 或直接灰掉；鼠标 hover 元素时高亮区域和视觉位置明显错位。
- Flex 子项默认
position: static，z-index对它完全无意义 -
position: sticky虽然合法，但在 Flex 容器中行为不稳定，建议优先用relative或absolute - 若子项是
display: block且未设定位，哪怕父容器是flex，它依然按文档流渲染，z-index不触发
Flex 容器意外创建层叠上下文，把子项“关进小黑屋”
Flex 子项的 z-index 看似设得很高，却仍被外部元素盖住——大概率是它的某个父级（包括 Flex 容器自身）悄悄创建了新层叠上下文，导致子项的层级只能在“小房间”里比高低，出不去。
典型触发点：opacity: 0.99、transform: translateY(0)、filter: blur(0)、will-change: transform，哪怕只是 0.99 或空变换，也会强制新建上下文。
立即学习“前端免费学习笔记（深入）”；
- 用 DevTools 的 Layers 面板（或 3D View）确认是否有多层 stacking context 嵌套
- 检查 Flex 容器的 computed 样式，看
transform、opacity是否非默认值 - 临时删掉疑似属性，比如把
opacity: 0.99改成1，观察重叠是否消失 - 若必须保留视觉效果（如淡入），可将需要置顶的子项用
position: fixed提到body下，再 JS 同步位置（慎用）
同级 Flex 子项之间，z-index 比较只在“同一上下文内有效”
两个兄弟 Flex 子项 A 和 B，A 设了 position: relative; z-index: 2，B 是 position: static，那 B 永远在 A 下面——不是因为 B 的 z-index 小，而是它根本没资格参与比较。
但如果 A 和 B 都设置了 position 且都在同一个 Flex 容器下，它们就属于同一层叠上下文，此时 z-index 才真正起作用。
- 同层叠上下文中，
z-index数值大的在前；相等时，HTML 后出现的在前 - 不要依赖
order来“提层”，它只改显示顺序，不改层叠关系 - 用
outline: 1px solid red给所有子项描边，能立刻看清真实占位与视觉重叠是否一致 - 想让按钮浮在卡片右上角？别试
order+z-index，老实用position: absolute+top: 8px; right: 8px
替代方案：不用 z-index 也能避免重叠
很多所谓“重叠问题”，其实根源不在层级，而在布局失控。与其反复调 z-index，不如先回归盒模型本身。
例如：用负 margin 拉近两个 Flex 子项，结果后一项盖住了前一项——这不是层级问题，是 margin-left: -20px 只挪了渲染位置，没动布局占位，后续元素仍按原位置排布。
- 优先用
gap控制子项间距，它不触发重排，也不影响层叠逻辑 - 用
transform: translateX(-20px)替代margin-left: -20px，它不参与盒模型计算，更可控 - 检查父容器
overflow：若为hidden，溢出部分会被裁掉，重叠就“看不见”，但问题还在 - 在
justify-content: center下，负 margin 可能被 Flex 引擎主动“纠正”，不是失效，是布局算法在干预
transform、opacity 和 position 设置。 
