position: fixed设四边为0不一定全屏覆盖，因可能受滚动条宽度、页面缩放、父元素transform干扰或层叠上下文限制，导致边缘留白或错位；需确保z-index足够高、挂载于body下、避免父容器transform，并配合overflow: hidden等防穿透措施。
为什么 position: fixed 设四边为 0 不一定全屏覆盖？
直接写 top: 0; right: 0; bottom: 0; left: 0; 看似合理，但实际在部分场景下会漏掉滚动条宽度、缩放缩放（zoom 或 pinch-zoom）、或被父元素 transform 干扰，导致遮罩层边缘留白或错位。关键不是“设了 0”，而是“是否真正脱离文档流并锚定视口边界”。
必须加 z-index 且值要足够高
遮罩层常被 sticky 导航栏、第三方组件（如地图 SDK 的控件）或 iframe 盖住。仅靠 fixed 不保证层级优先。
-
z-index建议设为9999或更高（避免和框架默认值冲突，如 Bootstrap 的1050） - 若父容器有
transform、filter或will-change，会创建新层叠上下文，此时子元素的z-index只在该上下文中生效——遮罩层必须挂载到下，而非某个带transform的模块内 - 移动端 Safari 对
z-index在fixed元素上的解析更敏感，建议显式声明z-index: 99999;
需要显式设置 width 和 height 吗？
不需要。当 position: fixed 且四边均为 0 时，浏览器会自动拉伸元素填满视口，前提是它没有其他尺寸限制（如 max-width、flex 父容器约束、或 display: inline）。
- 避免给遮罩层设
display: inline或display: inline-block—— 它们会忽略top/right/bottom/left - 不要用
width: 100vw; height: 100vh;替代四边 0：在有垂直滚动条的页面中，100vw包含滚动条宽度，会导致水平溢出；而100vh在 iOS Safari 中可能因地址栏收起/展开而跳变 - 如果遮罩层里要居中内容，推荐用
display: flex; justify-content: center; align-items: center;，而不是依赖margin: auto（后者在fixed下行为不一致）
移动端适配：防止缩放与滚动穿透
用户双指缩放页面时，fixed 元素可能相对视口偏移；滚动底层内容还会“透出”——这是最常被忽略的实际问题。
- 加
touch-action: none;阻止遮罩层响应触摸事件（避免干扰内部按钮） - 遮罩层激活时，务必给
加overflow: hidden;，否则 iOS 上仍可滚动底层页面（仅靠pointer-events: none不够） - 不要依赖
user-scalable=no（已被现代浏览器忽略），改用 JS 监听touchmove并preventDefault()—— 但更稳妥的做法是：遮罩层本身设pointer-events: none;，内部可点击区域（如关闭按钮、表单）单独设pointer-events: auto;
真正难的不是写那四行 CSS，而是判断遮罩层是否真的“不可绕过”：它得扛住缩放、滚动、嵌套变换、跨 iframe 边界、以及各种框架的层叠污染。每次加遮罩前，先打开 DevTools 检查 computed position 和 containing block，比反复调 z-index 更有效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
