实现一个全屏遮罩层，核心需求只有两点：覆盖整个可视区域，并且不随滚动条移动。哪种 CSS 定位模式能满足？答案很明确——position: fixed，它是实现全屏遮罩的最佳方案，没有替代选项。
下面聊几个常见误区：有些开发者使用 absolute，但一旦父容器设置了 transform 或遗漏宽高，遮罩就会错位——因为 absolute 的定位基准是最近的有定位属性的祖先元素，这种父子依赖在复杂布局中极易出错。还有人尝试 relative，这更不靠谱——它没有脱离文档流，根本谈不上“覆盖”。而 fixed 是唯一始终以视口为参考的定位方式，天然适配全屏遮罩场景。
为何选择 position: fixed 而非 absolute 或 relative
简单总结：遮罩层的本质要求是“全屏覆盖”与“不受滚动影响”，fixed 是唯一同时满足这两个条件的定位方式。absolute 受限于最近的定位祖先，若父容器高度不足、含有 overflow: hidden 或 transform，遮罩层便会出现漏白或错位；而 relative 本身不脱离文档流，根本无法实现覆盖效果。因此，使用 fixed 是最可靠的选择。
inset: 0 与 top/right/bottom/left: 0 如何选择
在现代浏览器里，inset: 0 是语义更清晰、写法更紧凑的替代方案——Chrome 89+、Firefox 63+、Safari 14.1+ 都已经支持。但问题在于，如果你需要兼容 Safari 14.0 或旧版 Android WebView，则需要使用 fallback 方案:
.overlay {
position: fixed;
inset: 0;
top: 0; right: 0; bottom: 0;
