fixed遮罩层未铺满视口的根本原因是其宽高默认由内容撑开，需显式设width:100vw、height:100vh、top:0、left:0；层级问题源于堆叠上下文，应直挂body并设高z-index；移动端vh动态变化需用-webkit-fill-available或js适配；可访问性需结合aria-hidden、aria-modal与esc关闭逻辑。
为什么 position: fixed 遮罩层没铺满整个视口？
常见现象是遮罩层只覆盖了页面顶部一小块，或者滚动后消失——根本原因在于：fixed 元素的尺寸默认由内容撑开，不是自动占满视口。它脱离文档流，但不会自动继承 html 或 body 的宽高。
必须显式设置宽高才能全屏：
-
width: 100vw（不是100%，后者依赖父容器宽度，而fixed元素的“父级”在视口层面） -
height: 100vh（同理，100%在这里常失效） - 补上
top: 0; left: 0;确保从视口左上角开始定位
遮罩层被内容穿透或层级错乱怎么办？
z-index 是关键，但仅设一个值不够。问题常出在「堆叠上下文」：如果遮罩层父容器有 transform、opacity 或 <code>filter，会创建新层，导致子元素的 z-index 只在该上下文内生效。
实操建议：
- 遮罩层直接挂到
下，避开中间嵌套容器 - 用足够大的
z-index（比如9999），并确保没有祖先元素意外创建堆叠上下文 - 加
pointer-events: none;到遮罩层本身（如果只是视觉遮盖），再用子元素（如按钮）设pointer-events: auto;控制交互区域
移动端滚动时遮罩层错位或闪烁怎么处理？
iOS Safari 和部分安卓浏览器在地址栏收放、键盘弹出时会动态改变 vh 值，导致 100vh 不等于真实可视区高度，遮罩层出现缝隙或溢出。
更稳的方案：
- 用
height: -webkit-fill-available;（Safari 支持）配合min-height: 100vh; - 或 JS 动态监听
resize，重设style.height = window.innerHeight + 'px';（注意防抖） - 避免在遮罩层上设
overflow: auto，若需内部滚动，请用固定高度 +overflow-y: auto的子容器实现
要不要加 inert 属性辅助可访问性？
inert 能让屏幕阅读器忽略遮罩下的内容，并阻止焦点进入，但它目前仍是实验性属性（Chrome 115+ 支持，Firefox/Safari 尚未支持）。不能单独依赖它。
兼容性兜底做法：
- 遮罩层激活时，给
加aria-hidden="true"和tabindex="-1"，再用 JS 拦截keydown（Tab 键）防止焦点逃逸 - 遮罩层自身设
aria-modal="true"和role="dialog"，提升语义化 - 别忘了按
Esc关闭遮罩层，这是用户预期行为
vh 动态变化、堆叠上下文和焦点管理这三个地方。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
