遮罩层未覆盖内容主因是父元素的transform、perspective、filter等属性创建了新层叠上下文，使z-index失效；应检查并移除相关样式，或将遮罩DOM直接挂载到body末尾。

遮罩层没盖住内容，通常不是z-index没设高，而是position: fixed遇上**父元素的 transform、perspective 或 filter 等 CSS 属性**，意外创建了新的层叠上下文（stacking context），导致遮罩层被“困”在局部层级里，再高的 z-index 也出不去。

检查并移除触发新层叠上下文的父级样式

常见“隐形陷阱”父元素样式：

• transform: translateZ(0)、translateX(1px) 等任意 transform 值
• perspective: 1000px
• filter: blur(1px)、opacity: 0.99（注意：opacity
• will-change: transform（尤其在动画中滥用时）

✅ 解决方法：逐级向上检查遮罩层的父容器（特别是 body 直接子元素或布局容器），临时注释掉这些属性，看遮罩是否恢复正常覆盖。确认后，改用其他方式实现对应效果（例如用 top/left 替代 transform 做位移，用 visibility + transition 替代 opacity 控制显隐）。

确保遮罩层挂载在 body 根层级（推荐）

把遮罩 DOM 节点直接插入 document.body 最末端，避开任何可能带层叠上下文的包裹容器：

const modalOverlay = document.createElement('div');
modalOverlay.className = 'overlay';
document.body.appendChild(modalOverlay);

配合 CSS：

.overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.7);
  z-index: 9999; /* 足够高，且无父级干扰 */
}

z-index 不是越高越好，关键是层级关系清晰

不要盲目写 z-index: 999999。重点是：

• 遮罩层和弹窗本身应同属一个层叠上下文（比如都直接子于 body）
• 它们的 z-index 需满足：遮罩层 弹窗内容层（如按钮、标题），但 > 页面所有其他内容
• 若页面已有框架（如 Vue/React 组件树），确保弹窗组件渲染时未被嵌套在某个带 transform 的布局容器内

补充验证技巧

打开浏览器开发者工具 → 选中遮罩层 → 在 Styles 面板查看 “Computed” 下的 “Stacking level” 和 “Containing block”。如果显示 “(root)” 表示它在根层叠上下文，正常；若显示某 div 名称，说明它被限制在那个父容器的层叠上下文中 —— 这就是问题根源。