必须在 tailwind.config.js 的 theme.zindex 中显式声明 z-index 值，如 theme: { zindex: { 'tooltip': '40', 'modal-overlay': '60' } }，extend.zindex 无效；键名须加引号，数组写法已废弃；z-* 类生效需元素有非 static position 且未被父级层叠上下文隔离。

必须在 tailwind.config.js 的 theme.zIndex 对象里显式声明，否则生成的 CSS 里根本不存在对应类名——改了配置不重启 dev server，也照样不生效。

z-index 类没生成？检查配置位置和格式

Tailwind v3.0+ 完全忽略 extend.zIndex，哪怕你写得再完整，只要 theme.zIndex 没定义，z-tooltip 这类就永远不会出现在构建结果中。

• ✅ 正确写法：theme: { zIndex: { 'tooltip': '40', 'modal-overlay': '60' } }
• ❌ 错误写法：extend: { zIndex: { 'tooltip': '40' } }（等于白写）
• ⚠️ 键名必须加引号：'-1'、'99'，不能写 -1 或 99（JS 会转成数字键，导致生成失败）
• ⚠️ 数组写法已废弃：zIndex: ['0', '10', '50'] 不报错但不生成任何类，别用

z-index 加了却没效果？先看定位和层叠上下文

z-50 生效有两个硬前提：元素自身 position 必须是非 static 值；且不能被父级意外创建的层叠上下文锁死。

使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件

如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Andr​​oid友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Andr​​oid应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更

下载

• 忘了加 relative 或 absolute？z-50 直接被忽略
• 父容器有 transform、opacity: 0.99、filter 或 will-change？子元素的 z- 值只在该局部上下文中起作用
• 两个兄弟弹窗各自父容器都触发了新层叠上下文？它们的堆叠顺序由 HTML 顺序决定，跟 z 值无关

要不要加负值或超大数？语义化比数字更重要

硬塞 z-[9999] 看似保险，实则埋雷：第三方组件注入顺序可能覆盖你，多个 z-50 语义冲突难溯源，HMR 缓存还可能打乱声明顺序。

• 负值要显式声明：'-1': '-1'，Tailwind 会生成 -z-1 类（不是 z--1）
• 数值之间留间隙（比如 dropdown: '30'、tooltip: '40'），方便后续插中间层
• 禁用 z-10、z-[42] 这类原始写法，统一用 z-dropdown、z-toast 等语义名
• 别依赖 JIT 扫描动态值：z-[${depth}] 在生产环境大概率漏生成

真正卡住人的，从来不是数字够不够大，而是父容器有没有创建新层叠上下文——比如一个 transform: scale(0.99) 就能让整个子树的 z- 类失效，而你还在调数字。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！