z-index在flex项目中失效的根本原因是层叠上下文被截断。需确保父容器为flex且子元素定位（如relative/absolute），并避免transform、opacity等触发新层叠上下文的属性干扰。
flex项目上设置z-index没效果？先看父容器是否启用了display: flex
只有当父元素是 flex 容器（即设置了 display: flex 或 display: inline-flex）时，子元素的 z-index 才可能生效——但前提是这些子元素本身是定位元素。默认的 static 定位会忽略 z-index。
常见错误现象：z-index: 999 写了，层级却没变，鼠标 hover 或点击仍穿透到下层。
- 检查父元素是否真为 flex 容器：用浏览器开发者工具确认 computed
display是flex，不是block或被其他样式覆盖 - 确保目标 flex 项目设置了
position：至少为relative、absolute或fixed - 不要依赖 flex 排序（
order）来控制视觉叠放顺序：它只影响布局流，不改变层叠上下文
z-index在flex容器里失效的真正原因：层叠上下文被截断
flex 容器本身不会自动创建新的层叠上下文，但如果它带有 opacity、transform、filter 等属性，就会隐式创建一个，导致其内部的 z-index 只在该上下文内比较，无法与外部元素竞争。
使用场景：模态框盖在 flex 导航栏上，结果被遮挡；或两个并列 flex 容器里的弹层互相压不住。
立即学习“前端免费学习笔记（深入）”；
- 检查 flex 容器是否有
transform: translateZ(0)、opacity: 0.99等触发层叠上下文的样式 - 若需跨容器叠放，应让所有相关元素处于同一层叠上下文中：比如把它们提到同一个父级，或移除干扰属性
-
z-index数值大小只在同级层叠上下文中有效；不同上下文之间，谁“出生晚”（DOM 后置或 CSS 层叠顺序靠后）谁在上，数值无效
flex项目绝对定位后z-index仍不工作？注意transform的副作用
给 flex 项目加 position: absolute 和 z-index 后，如果同时存在 transform（哪怕只是 transform: translateX(0)），就可能触发新的层叠上下文，使 z-index 作用域收缩到自身内部。
错误示例：.item { position: absolute; z-index: 10; transform: scale(1); } —— 此时 z-index 实际只对它的子元素起作用。
- 优先用
top/left替代transform做位移，尤其当需要稳定控制层级时 - 如必须用
transform，且需保留z-index跨兄弟元素生效，请确保其父 flex 容器未创建新层叠上下文，并避免在该项目上叠加其他层叠触发属性 - Chrome DevTools 的 Layers 面板可直观看到层叠上下文边界，比单看
z-index数值更可靠
多层嵌套flex中z-index行为复杂性的根源
flex 布局本身不定义层叠规则，它只管排列；z-index 的行为完全由 CSS 层叠上下文树和定位上下文共同决定。一旦出现三层以上 flex 嵌套，又混用 transform、opacity、will-change，层叠路径就极难预测。
最容易被忽略的一点：flex 项目即使没有显式 position，只要父容器是 position: relative，它也不会自动获得层叠上下文——z-index 依然无效。
- 调试时不要只盯着
z-index数值，先用 DevTools 的 “Computed” 面板查position和z-index是否被计算为有效值（非auto） - 临时加
outline: 1px solid red辅助判断哪个元素实际响应了点击/悬停，比肉眼观察更准 - 复杂交互动效中，与其硬调
z-index，不如重构 DOM 结构，让需要叠放的元素处于同一 flex 容器下
