z-index生效的前提是元素position不能为static；它只在层叠上下文中起作用，且需避免父级opacity、transform等意外创建新层叠上下文；推荐用CSS自定义属性分档管理层级。
z-index 生效的前提是 position 不为 static
给一个 div 写 z-index: 999 却没用？先看它的 position 值是不是还停留在默认的 static。这是最硬性的门槛——z-index 对 static 元素完全不响应，连计算都不会参与。
必须显式设为以下之一：
-
position: relative（适合微调或作为子元素定位上下文） -
position: absolute（脱离文档流，依赖最近已定位祖先） -
position: fixed（相对于视口，常用于弹窗、导航栏） -
position: sticky（滚动时切换行为，需配合top/bottom）
漏掉这一步，后面所有数值都是白写。
层叠上下文才是 z-index 的真实作用域
z-index 不是全局排名表，而是一张张“局部排行榜”。两个元素即使 z-index 相差 1000，只要分属不同层叠上下文，就互不比较。
立即学习“前端免费学习笔记（深入）”；
哪些操作会意外创建新层叠上下文？常见但容易被忽略的有：
- 父元素设置了
opacity: 0.99（哪怕只是 0.99，不是 1） - 父元素用了
transform: translateX(0)或任何非none值 - 父元素启用了
filter: blur(1px)、will-change: transform - 父元素本身是
position: fixed且z-index不为auto
浏览器 DevTools 的 “Computed” 面板里，如果看到目标元素的 z-index 显示为灰色或标着 auto，往上逐级点开父节点，重点查这些触发属性。
用 CSS 自定义属性统一管理层级档位
靠临时堆高 z-index: 999999 解决遮挡，等于给后续维护埋雷。真正稳定的规则是分档、留空、可预期。
推荐在根级定义几档基础层级：
-
--z-base: 0（普通内容、卡片主体） -
--z-nav: 100（顶部导航、固定侧边栏） -
--z-dropdown: 200（下拉菜单、Tooltip） -
--z-modal-overlay: 1000（半透明遮罩层） -
--z-modal-content: 1001（弹窗本体） -
--z-toast: 2000（全局提示，需高于弹窗）
然后组件内直接引用：z-index: var(--z-modal-content);。这样改一处，全链路生效，也避免不同团队各自乱用 999/9999。
当元素被遮挡且无法点击时，优先检查父级是否截断了层级
点击不到底层元素，往往不是它自己层级低，而是它被锁在一个低优先级的层叠上下文里出不来。比如：
- 一个
.modal被包裹在.page-container中，而后者设置了transform: scale(1)→ 整个 modal 及其子元素都在这个新上下文里，再高的z-index也超不过同级的.header - 某个轮播图容器加了
opacity: 0.999，导致里面的按钮永远点不到
此时强行调高子元素 z-index 无效。解法只有两个：
- 删掉父级的触发属性（如把
opacity: 0.999改成rgba()背景色） - 把需要交互的元素“提出来”，用
position: fixed挂到body下，再用 JS 同步位置（慎用，影响可访问性和 SSR）
复杂嵌套中，层叠上下文比 z-index 数值更关键——它决定了你的数值有没有资格参与比较。
