flex子项设非auto的z-index必然触发层叠上下文；其z-index仅决定自身在flex容器内的排序，无法影响跨上下文的后代层级，故不可用于全局精细控层。
Flex子项设了z-index就会创建层叠上下文，不是“依然能”，而是“必然触发”——只要它满足定位 + z-index不为auto这两个条件。
Flex子项的z-index为什么自带层叠上下文
CSS规范明确将“display: flex或inline-flex容器的子元素，且z-index值不为auto”列为层叠上下文的触发条件之一。这和position: relative + z-index: 1触发上下文的逻辑一致，只是触发主体从“定位元素自身”变成了“Flex子项”。
关键点在于：z-index值是否显式声明。哪怕写的是z-index: 0、z-index: 1甚至z-index: -1，只要不是默认的auto，就立即激活该子项的层叠上下文。
- Flex容器本身不创建上下文（除非它自己也满足其他条件，比如
opacity: 0.99） - 但它的每个子项，只要带非-
auto的z-index，就各自独立创建一个上下文 - 这些子项之间互不隶属，彼此层级无法直接比较——它们只在父Flex容器这个“共同上级”中按DOM顺序或
z-index排序
常见错误：以为z-index能跨Flex子项全局生效
典型现象是：两个div同为Flex子项，一个设z-index: 10，另一个设z-index: 1，结果没按预期堆叠；或者加了transform后更乱了。
根本原因不是z-index写错了，而是你误把两个独立的层叠上下文当成了同一个空间：
-
z-index: 10的子项创建了自己的上下文A，内部所有后代都困在A里 -
z-index: 1的子项创建了自己的上下文B，内部所有后代都困在B里 - A和B谁在上，取决于它们在Flex容器内的层叠顺序（比如DOM顺序、
order值），而不是各自内部的z-index大小
换句话说：z-index在Flex子项上只管“它自己在Flex容器里排第几”，不管“它里面的按钮能不能盖过隔壁子项里的弹窗”。
什么时候必须用z-index又想避免上下文分裂
如果你确实需要控制Flex布局内多个区域的全局层级（比如导航栏浮层要盖过内容区），硬给每个子项加z-index反而会让事情更不可控。
更可行的路径是：
- 把需要高优先级的内容（如弹窗、下拉菜单）移出Flex容器，挂到
body下，再用position: fixed或absolute定位 - 若必须留在Flex结构内，只给**一个关键子项**设
z-index（比如主内容区设z-index: 1，其它子项保持z-index: auto），让其余部分自然服从默认层叠顺序 - 彻底放弃对Flex子项用
z-index做精细控制——它本就不是为此设计的；改用order、margin或DOM顺序调整视觉前后关系
Tailwind用户特别注意：z-类名可能根本没生效
Tailwind默认只生成有限范围的z-index工具类（如z-0到z-50）。如果你写了z-100但CSS文件里压根没对应规则，那z-index就是空转——既不报错，也不起效。
验证方法很简单：打开开发者工具，选中元素，看Computed面板里z-index是否显示为auto或具体数值。如果显示auto，说明类名未被编译，得检查tailwind.config.js里的theme.extend.zIndex配置或PurgeCSS是否误删了规则。
真正棘手的不是“怎么写”，而是“写了之后到底有没有进浏览器的渲染树”。这点比任何层叠规则都优先。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
