Flex子项z-index有时不写position也能生效，因CSS规范对Flex/Grid子项有例外处理：即使position为static，z-index仍可能参与层叠计算；但该行为依赖父容器为纯Flex容器、子项未触发新层叠上下文、浏览器兼容性良好等严格前提，不可靠，生产环境仍须显式设置position。
Flex子项上z-index为什么有时不写position也能生效
因为 Flex 子项是“特殊静态元素”——在 display: flex 容器中，即使 position 保持 static，z-index 仍可能被解析并参与层叠计算。这是 CSS 规范对 Flex 和 Grid 布局的明确例外处理，并非 bug。
但要注意：这种“直接生效”有严格前提，且行为不稳定，不能当作可靠方案：
- 父容器必须是真正的 Flex 容器（
display: flex或display: inline-flex，且未被其他样式覆盖） - 子项不能同时触发层叠上下文（如
opacity: 0.99、transform: translateZ(0)），否则会覆盖该例外规则 - 浏览器兼容性不一：Chrome/Edge 较早支持，Firefox 在较新版本才完全对齐，Safari 曾长期忽略此行为
- DevTools 的 Computed 面板里能看到
z-index显示为数字，不代表它真在起作用——得看最终渲染层是否如预期
什么时候z-index在flex子项上必须配position才可靠
几乎所有生产环境场景都需要显式设置 position。规范中的“例外”只是降低门槛，不是替代方案。
以下情况 z-index 一定失效（哪怕父容器是 Flex）：
立即学习“前端免费学习笔记（深入）”；
-
position是static（默认值），且子项同时带opacity < 1或transform——此时它创建了新层叠上下文，但z-index因无定位而被忽略 - 子项用了
position: sticky但滚动锚点未触发，实际计算仍为static - 通过 JS 动态添加 class，只加了
z-index类，漏掉position: relative类 - 父容器本身已触发层叠上下文（如
filter: blur(0)），子项又没设position，那它的z-index就连比较资格都没有
验证方法很简单：在 DevTools 里手动勾选 position: relative，如果层级立刻变化，就说明之前缺的就是这个。
Flex容器或其祖先意外创建层叠上下文导致z-index“失效”
这不是 z-index 失效，而是它被“关进小房间”了——子项的 z-index 只能和兄弟比，无法跨上下文赢过外部元素。
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
常见触发父级层叠上下文的属性（哪怕值看起来无害）：
-
opacity: 0.99（不是必须< 1，0.99就够） -
transform: translateX(0)、scale(1)、rotate(0deg)（只要不为none） -
will-change: transform、isolation: isolate -
filter: blur(0)、drop-shadow(none)（只要不为none）
后果很隐蔽：.item-a { z-index: 999; } 和 .item-b { z-index: 1; opacity: 0.99; } 放在同一 Flex 容器里，.item-b 反而盖住 .item-a——不是因为 z-index 数值大，而是因为它所在的新上下文整体渲染层更高。
transform在flex子项上会悄悄截断z-index作用域
给已定位的 Flex 子项加 transform，哪怕只是 transform: scale(1)，也会立即创建新的层叠上下文。此时它的 z-index 不再和兄弟项竞争，只控制自己内部后代的堆叠顺序。
典型错误写法：
.card {
position: relative;
z-index: 10;
transform: translateZ(0); /* 错！这会让z-index只对.card内部有效 */
}更稳妥的做法：
- 优先用
top/left等位移属性替代transform（尤其当需要稳定跨兄弟层级控制时） - 若必须用
transform，确保父 Flex 容器没有触发层叠上下文，且该子项未叠加opacity、filter等 - 想让整个卡片区域提升层级，不如给父容器加
z-index: 100（前提是它已设position: relative）
真正容易被忽略的是：transform 和 z-index 同时存在时，后者的作用范围已经变了，但样式表里看不出任何报错或警告。
