遮罩层未覆盖内容主因是父元素的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 < 1 也会创建新层叠上下文） -
will-change: transform（尤其在动画中滥用时）
✅ 解决方法：逐级向上检查遮罩层的父容器（特别是 body 直接子元素或布局容器），临时注释掉这些属性，看遮罩是否恢复正常覆盖。确认后，改用其他方式实现对应效果（例如用 top/left 替代 transform 做位移，用 visibility + transition 替代 opacity 控制显隐）。
确保遮罩层挂载在 body 根层级（推荐）
把遮罩 DOM 节点直接插入 document.body 最末端，避开任何可能带层叠上下文的包裹容器：
React Best Practices 2 0.1.0
下载
React 与 Next.js 性能优化指南，源自 Vercel 工程团队。适用于编写、审查或重构 React/Next.js 代码时使用。
立即学习“前端免费学习笔记（深入）”；
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 名称，说明它被限制在那个父容器的层叠上下文中 —— 这就是问题根源。
