z-index 设为 9999 依然被遮挡，通常是因为该元素没有建立新的层叠上下文（stacking context），或者其父级、祖先元素中存在其他层叠上下文且层级更高。排查时，应检查该元素的 `position` 属性是否有效，并向上追溯 dom 树，寻找设置了 `opacity`、`transform`、`filter` 或更高 `z-index` 的祖先节点。
为什么 z-index 不生效
当元素的 `position` 为 `static` 时，设置 `z-index` 无效。即使 `position` 为 `relative`、`absolute` 或 `fixed`，如果未创建新的层叠上下文，它仍会参与父级的层叠排序。若父级存在更高的层叠上下文，子级的 z-index 无法超越父级边界。
/* HTML */
<div class="parent">
<div class="child">Child</div>
</div>
/* CSS */
.parent {
position: relative;
z-index: 10;
}
.child {
position: absolute;
z-index: 9999;
}
在上述代码中，尽管 .child 的 z-index 为 9999，但它属于 .parent 这个层叠上下文内部。如果页面中有另一个同级元素 .sibling 设置了 z-index: 20，那么 .sibling 将覆盖整个 .parent 及其所有子元素，包括 .child。
如何触发新的层叠上下文
通过修改 CSS 属性来强制创建新的层叠上下文，可以隔离元素的层叠范围。常见的触发条件包括使用 transform、opacity 或 filter。这些属性会让浏览器为该元素生成一个新的渲染层，使其内部的 z-index 不再受外部影响，同时也防止其穿透外部的层叠上下文。
/* CSS */
.isolated {
position: relative;
z-index: 9999;
transform: translateZ(0); /* 触发新的层叠上下文 */
}
应用 transform: translateZ(0) 后，.isolated 元素将创建一个独立的层叠上下文。此时，它的 z-index: 9999 将在其父级层叠上下文中进行比较。如果父级层叠上下文本身没有被更高层级的兄弟元素覆盖，那么 .isolated 就能正确显示在最上层。这种方法常用于解决复杂布局中的层级冲突问题。
基于 opacity 属性的具体影响
在排查过程中，发现某些看似无关的属性如 opacity 也会意外创建层叠上下文。例如，当父元素设置了 opacity: 0.9 时，即使没有显式设置 z-index，该父元素也会成为一个层叠上下文。这会导致其子元素的 z-index 失效于全局排序，仅在该父元素内部有效。这种隐蔽的行为常导致开发者误以为 z-index 设置错误，实则是祖先节点的样式干扰了层叠顺序。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
