fixed定位必须配合top/left/right/bottom使用，因为仅设position: fixed不会拉伸元素，其尺寸默认由内容决定；要铺满视口，需显式设置四边为0，比vw/vh更可靠。
fixed定位为什么必须配合top/left/right/bottom使用
单纯写 position: fixed 不会触发遮罩效果，浏览器不会自动拉伸元素占满视口。fixed 元素默认尺寸由内容决定，和普通文档流一样“收缩包裹”。要铺满全屏，必须显式定义四边位置。
最简且兼容性最好的写法是：top: 0; left: 0; right: 0; bottom: 0。这比用 width: 100vw; height: 100vh 更可靠——后者在移动端滚动时可能因地址栏显示/隐藏导致高度抖动，而四边定位始终锚定视口边界。
遮罩层必须设z-index且高于其他fixed元素
很多遮罩点击无反应或被遮挡，根本原因是 z-index 没生效或层级不够。fixed 元素会创建新的层叠上下文，但它的 z-index 仍需显式设置，且要大于页面中所有可能重叠的 fixed 元素（比如导航栏、悬浮按钮）。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 给遮罩层设
z-index: 9999这类明显高位值，避免和业务组件冲突 - 确认父容器没用
transform、opacity等触发新层叠上下文的属性，否则会截断 z-index 层级链 - 如果遮罩内要放弹窗，弹窗本身也要设
position: fixed并配更高z-index（比如10000）
背景透明与pointer-events的取舍
遮罩常需要半透黑色背景（background: rgba(0,0,0,0.5)），但要注意：若遮罩层里不放任何可交互内容，又想让背后页面可滚动，就得加 pointer-events: none；但加了之后，遮罩自身就无法响应点击关闭——这是典型矛盾点。
常见解法：
- 遮罩层保留
pointer-events: auto（默认），靠监听自身 click 关闭，再用event.stopPropagation()阻止冒泡到下层 - 若需穿透点击，把遮罩拆成两层：底层仅负责背景（
pointer-events: none），上层极小透明区域（如width: 100%; height: 100%）捕获事件 - 避免对遮罩用
opacity: 0.5，它会让内部所有子元素一起变透明，而rgba()只影响背景色
移动端滚动穿透问题怎么破
iOS Safari 和部分安卓 WebView 中，遮罩显示时用户仍能滚动背后的 ，造成体验断裂。这不是 fixed 定位缺陷，而是浏览器默认行为。
关键动作只有两个：
- 遮罩显示时，给
加overflow: hidden（记得同时记录原overflow值，隐藏时还原） - 为防 iOS 上键盘弹出后 body 被顶起，额外加
position: fixed; width: 100%到 body —— 这会强制 body 锚定视口，但代价是滚动位置丢失，所以得先缓存scrollTop
真正容易被忽略的是：只禁用 body 滚动，不处理 touchmove 事件，在某些安卓机型上依然会穿透。稳妥做法是遮罩激活时，临时绑定 document.addEventListener('touchmove', e => e.preventDefault(), { passive: false })。
