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;