position: fixed; inset: 0 是最简全屏遮罩方案，因其无需计算视口尺寸、不依赖父容器定位、不触发重排，且天然覆盖所有滚动内容；相比四边分别写，inset: 0 语义更清晰、写法更紧凑，现代浏览器支持良好，漏写定位值或误用 absolute 会导致遮罩失效。
为什么 position: fixed 加 inset: 0 是最简全屏遮罩方案
因为不用计算视口尺寸、不依赖父容器、不触发重排，且天然覆盖所有滚动内容。相比 top: 0; right: 0; bottom: 0; left: 0，inset: 0 语义更清晰、写法更紧凑，现代浏览器支持良好（Chrome 89+、Firefox 63+、Safari 14.1+）。
常见错误是只写 position: fixed 却漏掉定位值，结果遮罩层缩成一个点（默认 top: auto; left: auto），或者误用 position: absolute 导致随滚动消失。
基础写法与必须加的兜底样式
仅靠 position: fixed; inset: 0 还不够——遮罩层默认没有背景、没有层级、可能被其他元素穿透：
-
background-color或background必须显式设置（如rgba(0,0,0,0.5)），否则不可见 -
z-index要足够高（如z-index: 9999），避免被弹窗、导航栏等覆盖 - 若需点击穿透（比如只做视觉遮罩），加
pointer-events: none；否则保持默认auto - 旧浏览器兼容：可并行写
top: 0; right: 0; bottom: 0; left: 0，现代浏览器会优先用inset
示例：
.overlay {
position: fixed;
inset: 0;
top: 0; right: 0; bottom: 0; left: 0; /* 兜底 */
background-color: rgba(0, 0, 0, 0.6);
z-index: 9999;
}
遮罩层内容居中时的典型陷阱
很多人把弹窗直接塞进遮罩层里，用 margin: auto 或 flex 居中，但容易忽略两点：
- 遮罩层本身没设
display: flex，子元素用margin: auto无效（块级元素水平可居中，垂直不行） - 若遮罩层内有多个子元素（比如遮罩 + 弹窗 + 关闭按钮），未设
display: flex; justify-content: center; align-items: center就无法真正居中 - 弹窗自身若含
position: absolute，其定位参考的是最近的「已定位祖先」，而遮罩层是fixed，所以弹窗会相对于视口定位，而非遮罩层内部——这点常被误以为是 bug
推荐做法：遮罩层设 display: flex; justify-content: center; align-items: center，弹窗用普通文档流（position: static）或 position: relative。
移动端适配与滚动穿透问题
在 iOS Safari 和部分安卓浏览器中，遮罩层启用时若页面仍可滚动，会出现「底层内容透出」或「遮罩层抖动」：
- 根本原因是
body滚动未被禁用。单纯给body加overflow: hidden在 iOS 上可能失效，需配合touch-action: none或监听touchmove阻止默认行为 -
inset: 0在某些旧版 Safari（ - 如果遮罩层内有输入框（
input或textarea），iOS 键盘弹出会推高视口，导致遮罩层底部留白——这时不能靠inset自动适应，得监听resize事件动态调整高度
实际项目中，遮罩层逻辑往往比样式更复杂：显示/隐藏状态管理、ESC 键关闭、点击遮罩关闭、焦点捕获……这些都不是 inset: 0 能解决的。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
