z-index不生效主因是未理解层叠上下文：z-类直接映射z-index数值，但仅在同层叠上下文中有效；父元素无z-index或含transform等属性会创建新上下文，使子元素z值失效。
z-index 不生效？大概率是没理解 Tailwind 的 z- 系列类和 CSS 层叠上下文的关系。
z- 类名对应哪些 z-index 值
Tailwind 的 z-0 到 z-50 是预设的整数，不是“越高越靠前”的模糊概念——它直接映射到 CSS 的 z-index 数值。比如 z-10 就是 z-index: 10，z-auto 对应 z-index: auto。
-
z-0是默认层（多数元素隐式为z-index: 0，但注意：只有定位元素才触发层叠上下文） -
z-10、z-20、z-30、z-40、z-50每级差 10，适合快速分层 - 没有
z-1或z-999这类“极端值”，想用得自己在tailwind.config.js的theme.extend.zIndex里加
为什么加了 z-20 还被盖住
最常见原因：父容器没形成层叠上下文，或者子元素的层叠上下文“重置”了层级关系。CSS 的 z-index 只在同一个层叠上下文中起作用。
- 父元素用了
position: relative但没设z-index→ 它仍是z-index: auto，子元素的z-50仍受限于文档流层级 - 父元素有
transform、opacity 、<code>filter等属性 → 自动创建新层叠上下文，子元素的z-值只在这个新上下文内有效 - 两个兄弟元素分别设
z-10和z-20，但它们的父容器不同且都创建了独立层叠上下文 → 实际谁在上，取决于父容器在文档流中的顺序，不是子元素的z-值
modal、tooltip、dropdown 等浮层该用哪个 z- 值
Tailwind 默认配了 z-50（tooltip）、z-40（dropdown）、z-50（modal overlay）、z-50（modal content），但实际要按项目需求微调。
立即学习“前端免费学习笔记（深入）”；
- 避免硬编码写死
z-50：用@layer components或自定义 class 统一管理，比如.modal-backdrop { @apply z-50; } - 如果 modal 里嵌了 tooltip，tooltip 至少要比 modal content 高一级，否则会被盖住 → 用
z-60而非默认z-50 - 移动端键盘弹出时，某些安卓 WebView 会重置根层叠上下文 → 浮层可能突然失效，这时需要强制给
或加style="z-index: 0"来稳定根上下文
真正卡住人的从来不是 z- 值写多少，而是没意识到：每个 position: relative/absolute/fixed 元素是否处在同一层叠上下文里。检查父级有没有无意中触发新上下文，比反复调大 z- 数字管用得多。
