z-index生效的前提是元素必须定位（非static），且未被父级层叠上下文隔离；tailwind中zindex配置需严格遵循对象格式并重启服务；z-index:0会创建层叠上下文，慎用。
元素没定位，z-index根本不会生效
浏览器对 position: static（默认值）的元素完全忽略 z-index，连 warning 都不报。这不是“效果弱”，是压根不参与层叠计算。
- 用 Chrome DevTools 选中目标元素，在 «Computed» 面板搜
position，确认最终值不是static - 临时加一行
position: relative—— 它不影响文档流，却能立刻激活z-index - JS 动态插入时，别只改
z-index；必须同步设置position，否则样式无效 -
display: flex或grid容器里的子项，即使没写position，z-index也能生效，但仅限该容器内部，且仍受父级层叠上下文约束
父元素悄悄创建了层叠上下文
只要某个祖先元素满足以下任一条件，它就建立了一个独立的“层叠盒子”，子元素的 z-index 只能在里面比大小，出不去。
- 常见触发属性：
opacity小于 1（哪怕opacity: 0.999）、transform不为none（包括translateZ(0)、scale(1)）、filter不为none（哪怕blur(0)）、will-change: transform、isolation: isolate - 在 Chrome DevTools 的 Elements 面板里逐级点击父节点，右侧面板 «Layout» 标签页看 «Stacking context» 是否突然变成
Yes - 临时注释掉可疑父级的
transform或opacity，遮挡消失就坐实问题 - 别只堆子元素的
z-index：子元素z-index: 9999，父容器z-index: 1，仍可能被兄弟容器（z-index: 2）整体压住
Tailwind CSS 中 z-index 配置错就等于没配
Tailwind v3.0+ 已废弃数组写法，zIndex 必须严格定义在 theme.zIndex 下，格式不对或位置错，生成的 CSS 根本不存在。
-
theme.zIndex必须是完整对象，不能只写extend: { zIndex: { 'modal': '50' } }—— 默认为空，追加无效 - 键名必须加引号：
'modal'✅，modal❌（JS 解析会截断） - 值必须是字符串：
'50'✅，不要写成数字50（兼容性不保证） - 改完配置必须重启开发服务器 —— Tailwind 不热重载
tailwind.config.js变更
z-index: 0 和 z-index: auto 语义完全不同
很多人随手加 z-index: 0 想“保险”，结果反而制造新问题：它会强制创建层叠上下文，而 z-index: auto（默认）不会（前提是元素已定位）。
- 检查父容器是否意外设置了
z-index: 0+position: relative—— 这等于主动建了个结界 - 如果只是想让元素参与层叠排序但不想隔离上下文，用
z-index: auto更稳妥 -
z-index: -1会让元素沉到父上下文的背景和边框之下，慎用 - 全局乱用
z-index: 9999会让后续组件（如模态框、通知栏）无法插入中间层级；建议按功能分组管理，比如'dropdown': '30'、'modal-overlay': '60'
z-index，而是得顺着 DOM 往上翻三五层，找到那个没声没息就切断层级链的 transform 或 opacity。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
