模态框遮罩没盖住整个视口，根本原因是定位方式或尺寸设置不当；应使用 position: fixed 配合 top/right/bottom/left: 0 或 100vw/100vh，确保覆盖视口，同时设置足够 z-index 和显式背景色。
模态框遮罩没盖住整个视口，通常是因为定位方式或尺寸设置不当。用 position: fixed 配合全屏宽高是最稳妥的解法，关键在“固定定位 + 覆盖视口”两个条件必须同时满足。
遮罩层必须用 fixed 定位
relative 或 absolute 定位会受父容器限制，容易被截断或偏移。fixed 是相对于视口定位，不随滚动而移动，天然适合遮罩：
- 确保遮罩元素没有设置
position: relative/absolute等干扰定位的样式 - 给遮罩加
position: fixed;，并清除可能存在的top/left/right/bottom偏移（如设为 0） - 避免父元素设置了
transform、perspective或filter—— 这些会创建新的定位上下文，让 fixed 失效
宽高必须覆盖整个视口
只写 width: 100%; height: 100% 不够，因为百分比在 fixed 元素中是相对于其包含块（通常是初始包含块），但仍有兼容性风险。更可靠的是：
- 用
width: 100vw; height: 100vh;—— 明确表示视口宽度和高度 - 或者更保守地写
top: 0; right: 0; bottom: 0; left: 0;，四边归零自动撑满 - 注意：不要同时写
width/height和top/right/bottom/left，避免冲突
层级和背景必须显式设置
遮罩“看不见”或“不挡内容”，常因 z-index 或 background 缺失：
立即学习“前端免费学习笔记（深入）”；
- 给遮罩设
z-index: 9999;（确保高于模态框主体，一般模态框主体 z-index 设为 10000） - 必须声明
background-color: rgba(0,0,0,0.5);或类似半透色，透明度别设为 0 - 避免遮罩用了
background: none或transparent却忘了加 opacity 控制
滚动页面时遮罩要稳住不动
如果滚动后遮罩“跟着动”或“露出空白”，说明它没真正 fixed：
- 检查是否误加了
position: sticky或transform: translateZ(0)等触发硬件加速但破坏 fixed 行为的属性 - 确认 body 没有
overflow: hidden（这会让遮罩无法响应滚动，但不是遮罩不全的主因） - 移动端需额外注意：iOS Safari 对 vh 有兼容问题，可配合 JS 动态设置高度，或 fallback 到
min-height: 100%+min-width: 100%
基本上就这些。fixed + 四边归零 + 足够 z-index + 显式背景，遮罩就能稳稳盖住整个屏幕，不复杂但容易忽略细节。
