z-index: 9999失效主因是元素被父级层叠上下文“锁死”，需先确认position非static，再用devtools逐级排查opacity、transform等隐式创建上下文的属性并调整对应父容器样式。
z-index 不是全局排序器，滥用会导致不可预测的遮挡和调试黑洞——必须按层叠上下文建模，而非靠数字堆高。
为什么 z-index: 9999 反而让元素消失
写 z-index: 9999 却失效，大概率不是值不够大，而是它被锁死在某个父级层叠上下文中。只要祖先元素满足以下任一条件，就会创建独立的“小房间”：opacity: 0.99、transform: translateZ(0)、filter: blur(0)、will-change: transform，甚至 position: fixed 且 z-index 不为 auto。子元素的 z-index 只在这个房间内比大小，再大也出不去。
排查方法：Chrome DevTools 中选中目标元素 → 「Computed」面板搜 stacking context，逐级往上点父节点，看哪一层突然变成 Yes；临时删掉可疑父级的 transform 或 opacity，观察遮挡是否立刻解除。
如何建立可维护的 z-index 层级体系
用魔数写 z-index: 12345 是自找麻烦。推荐按功能划分区间，并用 CSS 自定义属性统一管理：
-
--z-base: 0–9，用于卡片、表单控件等默认内容层 -
--z-overlay: 50–80，用于下拉菜单、Tooltip、遮罩层 -
--z-modal: 100–120，用于全屏弹窗、确认框 -
--z-toast: 130–140，用于短暂提示（避免被 modal 挡住）
然后在 CSS 中直接引用：.modal { z-index: var(--z-modal); }。Tailwind 用户注意：theme.zIndex 必须完整定义为对象，键名加引号、值为字符串，改完要重启开发服务。
定位类型没配对，z-index 就是摆设
z-index 生效的前提是元素已定位，但仅设 z-index 而不设 position，浏览器直接忽略。常见错误包括：
- 只写
z-index: 10，漏掉position: relative - 给子元素设
position: absolute，却没给父容器设position: relative→ 子元素相对视口定位，布局漂移 - 多个
absolute元素都top: 0; left: 0，靠z-index控制前后，但没统一参考点，视觉重叠却逻辑混乱
正确做法：先明确谁当“定位容器”，设 position: relative；再让子元素用 absolute 或 fixed 定位，并通过 z-index 控制顺序。
IE6/7 的 select 穿透与 hasLayout 遗留问题
现代项目虽少兼容 IE，但若需支持，要注意两个经典陷阱：
-
<select></select>在 IE6/7 中无视z-index，永远置顶。临时解法是鼠标悬停时隐藏所有select：select { visibility: hidden; } - IE 特有的
hasLayout属性会影响层叠行为。触发方式包括zoom: 1、height: 1%、overflow: hidden等，可能意外改变z-index表现，应避免无意义设置
真正难缠的不是数值大小，而是层叠上下文的嵌套深度和隐式创建——它不像 JS 错误能抛异常，而是静默错位，直到用户点不到按钮、弹窗出不来、光标跟随元素突然消失。动手前，先用 DevTools 确认 stacking context 边界，比调一百次 z-index 更有效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
