z-index没生效主因是元素未定位或被父层叠上下文隔离；需确认position非static，并逐级检查opacity
不是数值不够大，而是 z-index 根本没生效——它被父级层叠上下文锁死了，或者元素压根没定位。
为什么加了 z-50 却完全没反应
最常见原因是元素自身 position 仍是 static（默认值），而 z-index 对 static 元素完全无效。Tailwind 的 z- 工具类只在配合 relative、absolute、fixed 或 sticky 时才起作用。
- 错误写法：
class="z-50"→ 没有position，z-50被浏览器忽略 - 正确写法：
class="relative z-50"或class="fixed z-50" - 检查 DevTools 的 «Computed» 面板，搜
position，若显示static，说明定位缺失
为什么父容器设了 transform 或 opacity: 0.99 就失效
只要某个祖先元素触发了层叠上下文（stacking context），它的所有子元素（包括弹窗）的 z-index 就只能在这个“小房间”里排队，再高也出不去。
- 触发条件包括：
opacity小于 1、transform不为none、filter不为none、will-change、isolation: isolate，甚至overflow: hidden+ 非staticposition - 用 Chrome DevTools → «Layers» 面板，点开分组边界，高亮对应 DOM 节点，再查 «Computed» 里是否有上述属性
- 临时删掉可疑样式（如
transform: scale(1)），看弹窗是否立刻显示正常
为什么 z-[999] 在 React/Vue 里不生成样式
Tailwind 的 JIT 引擎只扫描 content 字段中出现的**字面量字符串**，动态拼接的 class（如 class={`z-[${depth}]`}）不会被识别，构建后直接丢失。
-
z-[999]只在开发时能用（且需确保该字符串出现在 HTML/JSX 文件中），生产环境不可靠 - 更严重的是语义缺失：没人知道
z-[999]是遮罩层、下拉菜单，还是 Tooltip - 推荐做法：在
tailwind.config.js中明确定义语义化层级，例如：
theme: {
zIndex: {
'modal-overlay': '60',
'modal-content': '70',
'tooltip': '40',
'toast': '50'
}
}
然后统一使用 z-modal-overlay，改完必须重启开发服务器。
为什么弹窗里 el-select 下拉框被截断
即使 el-select 用 teleport 挂到了 body，只要其触发器（比如弹窗容器）设置了 overflow: hidden 或 overflow: auto，视觉上仍会被裁切——这是渲染层与剪裁区错位导致的假遮挡。
- 检查弹窗容器是否带
overflow，优先改为overflow: visible或删掉 - 显式指定
<el-select teleport="body"></el-select>，并确保body没有overflow: hidden - 避免给弹窗本身设过高的
z-index（如z-999999），el-select下拉默认z-index约 2000，设成z-2100更安全且可控
真正卡住你的往往不是数字大小，而是某个父元素悄悄加了一行 opacity: 0.99 或 transform: translateZ(0) —— 它不报错、不警告，只默默把你的弹窗关进一个看不见的盒子里。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
