结论：Tailwind的z-index混乱90%源于未理解层叠上下文和配置机制；配了z-999却不生效，主因是父容器未定位或未在theme.zIndex中正确定义对象映射，且必须重启dev server。
直接说结论：Tailwind 的 z-index 混乱，90% 不是数值没配够，而是没理解层叠上下文和配置生效机制——配了 z-999 却不生效，大概率是因为父容器没定位，或你根本没在 theme.zIndex 里声明它。
tailwind.config.js 中的 zIndex 必须用对象语法声明
Tailwind v3.0+ 已废弃数组写法（如 extend: { zIndex: ['0', '10', '50', '999'] }），只认对象映射。错用数组或写在 extend.zIndex 里（而非 theme.zIndex），配置就完全不会生成 CSS 规则。
- ✅ 正确位置：
module.exports = { theme: { zIndex: { '0': '0', '10': '10', '50': '50', '999': '999', 'max': '2147483647' } } } - ❌ 错误写法：
extend: { zIndex: { '999': '999' } }（这只会追加，但默认 theme.zIndex 为空时仍无基础类） - ⚠️ 键名必须加引号：
'999'而非999，避免 JS 自动类型转换导致不可预期行为 - ? 改完必须重启开发服务器——Tailwind 不热重载配置变更
z-999 生效的前提是元素有定位且处于正确层叠上下文
写了 z-999 却被盖住？不是数字不够大，而是 z-index 根本没起作用。CSS 的 z-index 只对已定位元素（position: relative/absolute/fixed/sticky）有效，且只在**同一层叠上下文内**比较。
- 父容器没设
position→ 子元素的z-999在文档流中无效，等同于没写 - 父容器有
transform、opacity: 0.99、filter: blur(1px)→ 自动创建新层叠上下文，子元素的z-999只在这个“小世界”里管用 - 两个兄弟元素分别设
z-50和z-999，但它们的父容器各自创建了独立层叠上下文 → 谁在上，取决于父容器在 HTML 中的顺序，跟子元素 z 值无关 - 浏览器检查技巧：选中元素 → 查看 Computed 面板里的
position和z-index，确认是否为预期值，以及containing block是否符合预期
避免随意用 z-[999] 这类任意值语法
z-[999] 看似灵活，但依赖 JIT 模式扫描 content 数组中的字符串，且无法静态分析动态拼接（如 React 中 z-[${depth}]）。生产环境极易漏生成、难维护。
- ✅ 推荐做法：在
theme.zIndex中明确定义常用层级（如'tooltip': '50','modal': '50','modal-backdrop': '49'），然后在 HTML 中写class="z-modal" - ❌ 不推荐：
class="z-[999]"或class={`z-[${depth}]`}，除非你已确保content包含所有可能值且禁用 PurgeCSS 删除 - ? 真要全局最高，配
'max': '2147483647'比猜999或9999更可靠，也更语义化
最常被忽略的一点：z-index 管理混乱，从来不是因为没配够数字，而是没意识到每个 position: relative、opacity 、transform 都可能悄悄创建新的层叠上下文——它像一层看不见的玻璃罩，把你的高 z-index 锁在里面。先检查父级是否无意中“关了门”，再调数字。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
