用 @mixin 封装遮罩层应基于 position: fixed + inset: 0，暴露 inset、z-index、background-color 参数，禁用 width/height 全屏写法，用 flex 居中，伪元素需 content+relative/absolute+inset 三要素齐备，优先用 100dvh 替代 100vh，并规避祖先 transform 导致的层叠上下文陷阱。
用 @mixin 封装遮罩层基础结构，而非写死尺寸或定位
全屏遮罩的核心是 position: fixed + inset: 0，但直接在每个组件里重复写这组规则，既易漏边（比如只写 top/left 忘了 bottom/right），又难统一控制 z-index 和 pointer-events。用 Sass Mixin 抽出来最稳妥。
关键点不是“能不能封装”，而是封装时别把不该固定的值写死：
-
inset、z-index、background-color这三项必须作为参数暴露，尤其是z-index—— 弹窗、Tooltip、Toast 的层级常冲突，硬编码9999只会让后续覆盖越来越难 - 别在 Mixin 里设
width: 100vw; height: 100vh，iOS Safari 下vh会因地址栏收起失效，inset: 0才是语义正确且兼容性更稳的选择 - 默认关闭
pointer-events，但留出开关：比如$interactive: false参数，方便需要点击穿透（如视频控件）或拦截（如模态框关闭）的场景
遮罩内子元素居中必须用 display: flex，margin: auto 在 fixed 容器里不生效
很多人试过 top: 50%; left: 50%; transform: translate(-50%, -50%)，看似能居中，但一滚动就偏移，或在高 DPI 屏上模糊。根本原因是 fixed 元素本身没尺寸约束，transform 的基准不稳定。
真正可靠的组合是：position: fixed 提供全屏锚点，display: flex + justify-content: center + align-items: center 解决未知尺寸下的精准居中：
- 父遮罩层必须显式设
inset: 0（不是width/height），否则 flex 容器高度为 0 - 子元素（如加载图标、文字）别设
width: 100%或height: 100%，它会撑满 flex 容器导致变形；固定尺寸 +margin: auto是冗余的，flex 已接管布局 - 如果子元素需响应式缩放（比如 SVG 图标），用
max-width: 80vw+max-height: 80vh限制上限，避免在小屏溢出
伪元素遮罩（::before）比纯背景色更可控，但三要素缺一不可
当遮罩要叠加在 <video></video> 或复杂背景图上时，直接给容器加 background-color: rgba(0,0,0,0.5) 是无效的——它和视频不在同一渲染层，视觉上构不成“视频 → 遮罩 → 文字”的堆叠链。
此时必须用伪元素，且以下三点必须同时满足，否则伪元素压根不渲染或错位：
-
content: ""必须显式写出，空字符串也不能省 - 父容器得是
position: relative或position: fixed，否则position: absolute会相对于初始包含块定位，大概率跑飞 - 伪元素自身必须设
position: absolute+inset: 0（或等价的四边0），只写width: 100%; height: 100%在 flex 或有 padding 的父容器里会失效
SCSS 里可封装成 @mixin video-overlay($opacity: 0.65)，内部自动补全这三要素，并加 pointer-events: none 确保不拦截底层交互。
移动端 Safari 的视口抖动问题不能靠 JS 强刷，得从定位逻辑上规避
iOS Safari 滚动或软键盘弹出时，fixed 遮罩常出现底部留白或顶部错位，本质是浏览器对视口高度的定义在动态变化，而 fixed 元素不会自动重绘。
监听 scroll 或 resize 并强制 transform: translateZ(0) 是临时止痛药，治标不治本，还可能引发重排性能问题。更实际的做法是：
- 彻底放弃
100vh，改用min-height: 100dvh（dynamic viewport height），Chrome 105+/Safari 16.4+ 已支持，它会随地址栏收起/展开实时更新 - 若需兼容旧版 Safari，用 JS 动态设
style.height = window.innerHeight + 'px'，但只在首次渲染和orientationchange时触发，避免滚动中高频执行 - 加
body { overscroll-behavior: contain; }，防止用户在遮罩激活时仍能滚动底层内容，这是比“修复抖动”更优先的体验控制点
真正容易被忽略的是：遮罩是否被祖先的 transform、filter 或 will-change 意外创建了新的层叠上下文——一旦发生，fixed 就不再锚定视口，而是锚定那个带变换的父容器，所有尺寸计算都会崩掉。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
