使用position: fixed实现弹窗遮罩，通过top:0、left:0、宽高100%覆盖视口，结合flex居中弹窗，z-index确保层级最高，JS添加body.overflow-hidden防止滚动穿透，点击遮罩关闭并恢复滚动。
使用 CSS 的 position: fixed 可以轻松实现弹窗遮罩的固定效果，确保遮罩覆盖整个视口且不随页面滚动而移动。关键在于将遮罩层定位到屏幕正中间并铺满整个可视区域。
1. 遮罩层基本结构与样式
遮罩层通常是一个全屏半透明的背景，用来突出显示弹窗内容，同时阻止用户操作底层页面。
我是弹窗内容
说明：
- position: fixed 让遮罩脱离文档流，相对于视口定位
- top: 0; left: 0; 配合宽高100% 实现全屏覆盖
- z-index 确保遮罩和弹窗在最上层
- 使用 flex 布局 轻松居中弹窗
2. 防止页面滚动穿透
弹出遮罩时，常需要禁止背后页面滚动，避免遮罩“错位”错觉（其实不是fixed失效，而是底层在动）。
立即学习“前端免费学习笔记（深入）”；
解决方法：给 body 添加样式防止滚动：
JavaScript 控制示例：
// 显示遮罩
document.querySelector('.mask').style.display = 'flex';
document.body.classList.add('no-scroll');
// 隐藏遮罩
document.querySelector('.mask').style.display = 'none';
document.body.classList.remove('no-scroll');
3. 响应式与兼容性注意点
在移动端或小屏设备上，需注意以下细节：
- 使用 viewport units（如 vh/vw）时小心部分手机浏览器对 vh 的解析偏差，推荐仍用 100% 高度
- 遮罩内弹窗建议设置最大宽度（max-width）适配小屏
- 点击遮罩可关闭弹窗，提升用户体验
添加关闭功能：
document.querySelector('.mask').addEventListener('click', function(e) {
if (e.target === this) {
this.style.display = 'none';
document.body.classList.remove('no-scroll');
}
});
基本上就这些。只要正确使用 fixed 定位并处理好滚动问题，遮罩就能稳稳固定在屏幕上。 
