flex子项的z-index必须配合非static的position才能生效，否则无效；父容器或祖先触发层叠上下文会限制z-index作用范围；transform也会创建新层叠上下文；tailwind中z-index需在theme.zindex中正确定义并重启服务。
Flex子项的z-index必须配合position才能生效
不设position，z-index就是摆设。Flex布局本身不赋予子项定位能力，哪怕它被order或flex-direction排到了视觉前端，只要position是static（默认值），浏览器压根不解析z-index。常见错误包括：z-50类单独使用、Vue/React中动态添加z-100但漏掉relative类、或误以为display: flex自动激活z-index。
验证方法：打开DevTools → 选中元素 → 在「Computed」面板搜position，若值为static，立刻补上position: relative或对应定位值；临时在Styles面板勾选position: relative，看遮挡是否立刻修正。
父容器或祖先触发了层叠上下文
Flex容器本身不创建层叠上下文，但一旦它或任意上级元素设置了opacity（哪怕opacity: 0.99）、transform（包括translateZ(0)、scale(1)）、filter、will-change、backdrop-filter等，就会把整个子树“关进一个盒子”，子项的z-index只在该盒子内比大小——数值再大也盖不过盒子外的兄弟元素。
排查步骤：
- 在Chrome DevTools的Elements面板逐级点击父节点，右侧面板Layout标签页下查看「Stacking context」是否显示为
Yes - 或打开More Tools → Layers面板，观察是否有意外的分组边界
- 临时注释掉父级的
opacity、transform等样式，看层级是否恢复
修复方向：不是给子项狂堆z-index，而是给那个触发上下文的父容器本身加position: relative和合理z-index（如z-index: 100）来提升整块区域。
Flex子项上的transform会截断z-index作用域
给已定位的Flex子项加transform（哪怕是transform: rotate(0)或translateX(0)），会立即创建一个新的层叠上下文，导致它的z-index只对内部后代有效，无法和同级兄弟竞争。
典型错误写法：.item { position: absolute; z-index: 10; transform: scale(1); }。
更稳妥的做法：
- 优先用
top/left替代transform做位移 - 若必须用
transform，确保其父Flex容器未触发层叠上下文，且该子项没叠加其他触发属性（如opacity） - 避免在关键层级控制场景中混用
transform和z-index
Tailwind CSS中z-index类名未生成CSS规则
即使写了z-50，也可能根本没生成对应CSS。Tailwind v3+要求zIndex必须明确定义在theme.zIndex对象里，且格式严格：
- ❌ 错误：写在
extend.zIndex里（不会覆盖默认空值） - ❌ 错误：用数组写法
zIndex: ['0', '10']（v3已废弃） - ⚠️ 键名必须加引号：
'50': '50'，而非50: '50'（JS会转成数字键，引发不可预期行为）
改完tailwind.config.js后必须重启开发服务器——Tailwind不会热重载zIndex配置变更。
opacity、transform或filter在暗处起作用。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
