z-index不生效的首要原因是元素未定位（position为static），必须显式设置position: relative/absolute/fixed/sticky；其次需排查祖先元素是否触发层叠上下文（如transform、opacity
z-index不生效？先确认元素是否定位
直接加 z-50 却没反应，八成是忘了设 position。Tailwind 的 z- 类只对 position: relative、absolute、fixed 或 sticky 生效——static 下完全被忽略。常见踩坑点包括：
• 给普通 div 直接加 z-50，没写 relative
• 在 Flex/Grid 容器里子项未显式定位，误以为父容器的 z-index 能“透传”
• 使用了 transform 或 opacity: 0.99 等触发层叠上下文的属性，导致子元素 z-index 被锁死在局部范围内
为什么手动写 z-100 / z-9999 不靠谱
硬塞大数字看似能“压住一切”，实则埋下三重隐患：
• 第三方库（如 Headless UI、Radix）自带 z-10、z-50 等类，它们的 CSS 注入顺序可能晚于你的 Tailwind 输出，导致覆盖
• 多个组件各自定义 z-50，但语义不同（一个给 Toast，一个给 Dropdown），冲突时无法溯源
• 构建缓存或 Vite/HMR 机制偶尔打乱 CSS 声明顺序，z-9999 可能意外被后加载的样式降级
用 theme.zIndex 集中管理语义化层级
放弃零散数字，改在 tailwind.config.js 中统一声明职责明确的键名：
• 每个键对应一个 UI 角色（如 modal-overlay、tooltip），值为具体数字
• 数字本身不追求“够大”，而要留出间隙（比如 dropdown: '30' 和 tooltip: '40' 之间空出 10，方便未来插中间层）
• 所有组件必须用这些语义名（z-modal-overlay），禁用原始 z-* 数字类
module.exports = {
theme: {
extend: {
zIndex: {
'background': '0',
'content': '10',
'sticky': '20',
'dropdown': '30',
'tooltip': '40',
'toast': '50',
'modal-overlay': '60',
'modal-content': '70',
'loading-overlay': '80',
}
}
}
}
遇到第三方组件覆盖怎么办
Headless UI 的 Menu.Items 默认用 z-10，但你的 z-dropdown 是 30，它仍可能被压——因为它的样式在 Tailwind 后注入，或用了 !important。
• 优先查文档：Radix 的 Portal 支持传 className，直接塞 z-dropdown
• 若不支持，在 @layer components 中重写其选择器：.headless-menu-items { @apply z-dropdown; }
• 切忌全局加 !z-dropdown——! 是最终手段，会破坏可维护性，且可能和 Element Plus 等 UI 库的内联样式冲突
立即学习“前端免费学习笔记（深入）”；
实际项目里最常被忽略的是层叠上下文的嵌套深度：哪怕你把z-modal-content 设成 999，只要它父容器带 transform 或 opacity: 0.99，它就永远出不了那个“盒子”。调试时别只盯数字，先打开 Chrome 的 Layers 面板看上下文边界。 
