遮罩层没盖住内容通常因未设置定位属性导致z-index失效，需设position:fixed/absolute并确保无父级层叠上下文干扰，同时z-index值应显著高于目标元素且body滚动需禁用。
遮罩层没盖住内容，通常不是 z-index 没设，而是它没生效——z-index 只对定位元素（position 值为 relative/absolute/fixed/sticky）起作用。
检查遮罩层是否设置了定位
即使写了 z-index: 9999，如果遮罩层的 position 是默认的 static，z-index 就完全被忽略。
- 给遮罩层加上
position: fixed（推荐，全屏覆盖且不随滚动偏移）或position: absolute - 示例：
.mask { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0,0,0,0.5); z-index: 9999; }
确认父容器没有创建新的层叠上下文
如果遮罩层的某个祖先元素设置了 position: relative + z-index（哪怕只是 1），它就可能成为新的层叠上下文，导致子级的 z-index 只在该上下文内比较，无法压过同级其他模块。
- 用浏览器开发者工具（Elements 面板）逐级查看遮罩层的父节点，看是否有
z-index、opacity 、<code>transform、filter等会触发新层叠上下文的样式 - 临时移除可疑父元素的
z-index或transform，观察遮罩是否恢复正常
对比目标内容的层叠层级
被遮罩的内容本身也可能有较高的 z-index，或者它的父容器已形成更强的层叠上下文。
立即学习“前端免费学习笔记（深入）”；
- 检查内容区域及其祖先是否设置了
z-index（尤其 Modal、Header、Fixed Nav 等常用组件） - 确保遮罩层的 z-index 数值明显高于所有可能干扰它的元素（比如设成 9999，而内容区是 999）
- 避免使用过小的 z-index（如 10、100），不同框架/组件库常自带 z-index 基线（Bootstrap 的 modal 是 1050，Ant Design 是 1000）
补充：固定定位需注意 body 滚动问题
用 position: fixed 的遮罩虽能稳居顶层，但如果页面本身可滚动，有时会因 body 未禁用滚动导致遮罩下仍有内容可见。
- 弹出遮罩时，给
加上overflow: hidden - 关闭遮罩后记得恢复
overflow: auto或原有值（可用 class 切换控制）
