fixed遮罩未撑满全屏的根本原因是默认宽高为内容尺寸且受父容器transform等影响；需显式设width:100vw、height:100vh、top:0、left:0，并注意z-index层级、pointer-events及兼容性问题。
为什么 position: fixed 遮罩层没撑满全屏？
常见现象是遮罩只盖住视口一部分，滚动后消失，或在移动端留白。根本原因是 fixed 元素默认宽高为内容尺寸，不是视口尺寸；且受父容器 transform、perspective 或 filter 影响时会“脱离固定定位上下文”。
- 必须显式设置
width: 100vw和height: 100vh（注意：100%不行，它参考的是父容器高度，而fixed元素的父级是 viewport） - 加
top: 0; left: 0;确保锚点归零，否则可能偏移 - 移动端 Safari 下，
100vh有时会把地址栏高度算进去导致溢出，稳妥做法是用min-height: 100vh+min-width: 100vw
z-index 层级混乱导致模态框被盖住
遮罩层不显示，或模态框内容被其他元素压在下面，基本都是 z-index 值没对齐或父容器形成了新的层叠上下文。
- 遮罩层建议设
z-index: 1000，模态框本体设z-index: 1001（差值不用大，但必须严格递进） - 检查遮罩层父元素是否设置了
transform、opacity 、<code>will-change等——这些会创建新层叠上下文，让子元素的z-index只在该上下文内生效 - 避免用
z-index: 9999这类魔数，统一维护一个 CSS 变量，比如--z-modal-overlay: 1000
遮罩层点击穿透或无法关闭模态框
点了遮罩没反应，或者点了遮罩却触发了背后按钮，说明事件捕获/冒泡没控好，或遮罩本身不可交互。
- 遮罩层必须加
cursor: pointer，否则部分浏览器（尤其 Safari）默认不触发click事件 - 确保遮罩没有
pointer-events: none；如果用了，就改成pointer-events: auto - 模态框内容区域应设
pointer-events: auto，遮罩层设pointer-events: auto，但不要给遮罩加event.stopPropagation()—— 它本该冒泡到 JS 监听器里做关闭逻辑
兼容性与性能要注意的几个硬伤
fixed 遮罩在老 Android WebView 或 iOS 12-14 上容易抖动、失真，不是写法错，是渲染管线缺陷。
立即学习“前端免费学习笔记（深入）”；
- 避免在遮罩上用
backdrop-filter（毛玻璃），它会触发强制硬件加速，在低端机上卡顿甚至崩溃 - 不用
animation直接驱动遮罩显隐，改用opacity+transition，并加will-change: opacity提前提示合成器 - IE11 不支持
vw/vh在某些场景下（比如缩放时），如需兼容，可 fallback 到width: 100%+height: 100%并确保根元素html, body { height: 100%; }
真正麻烦的从来不是怎么写满全屏，而是当页面有 scroll-behavior: smooth、overscroll-behavior: contain 或嵌套 iframe 时，遮罩和滚动行为互相撕扯——这时候得靠 JS 拦截 touchmove 和 wheel，而不是再调 CSS。
