全屏遮罩层弹窗由分离的.overlay和.modal两个dom元素构成：遮罩用position:fixed+100vw/100vh确保视口全覆盖，弹窗用fixed+transform居中并独立层叠上下文，背景用rgba()控透明度，pointer-events需按交互需求显式设置。
全屏遮罩层弹窗不是靠“加一层蒙版”这种模糊概念实现的，而是由两个明确分离、层级受控的 DOM 元素共同构成：一个 .overlay（遮罩）和一个 .modal（弹窗）。关键不在“怎么加”，而在“怎么不互相干扰”。
遮罩层必须用 position: fixed + 100vw/100vh
用 width: 100%; height: 100% 很容易漏掉滚动区域或被父容器裁剪，尤其在嵌套布局中。移动端 Safari 对 100vh 的解析也不稳定（地址栏缩放时会变短）。
正确写法是：
.overlay {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: rgba(0, 0, 0, 0.6);
z-index: 100;
}
-
100vw/100vh确保覆盖整个视口，不受文档流或父级限制 - 别用
min-height: 100vh替代——它无法阻止内容撑高后遮罩被拉长，失去“全屏”意义 - 如果页面可滚动，
fixed能保证遮罩始终贴合视口，不会随页面滑动偏移
弹窗必须脱离文档流且独立堆叠上下文
z-index 生效的前提是元素已脱离文档流。设了 z-index: 9999 却被盖住？大概率是它的某个父级触发了新的层叠上下文（比如有 opacity、transform 或 filter）。
安全写法：
.modal {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 101; /* 必须 > overlay 的 100 */
background: #fff;
border-radius: 8px;
padding: 24px;
}
- 不要依赖
relative或absolute定位弹窗——它们仍可能被祖先的overflow: hidden或层叠上下文截断 -
transform: translate()是居中核心，只写top: 50%; left: 50%会让弹窗左上角落在中心，整体偏右下 - 确保弹窗和遮罩同级或至少共属一个无干扰的父容器，避免中间某层悄悄创建堆叠上下文
透明度必须用 rgba()，禁用 opacity
opacity: 0.6 会让整个遮罩元素（包括其子节点）都变透明。但遮罩层本不该有子内容；若你后续往里面加关闭按钮或加载图标，它们也会跟着发虚，可读性崩坏。
真正可控的方式只有：
- 遮罩背景用
background-color: rgba(0, 0, 0, 0.6)—— 仅影响背景色，子元素完全不受影响 - 弹窗自身用纯色背景（如
#fff），不需要额外透明度 - 十六进制色（如
#000）或命名色（如black）无法指定 alpha 值，直接排除
交互行为要显式控制 pointer-events
遮罩层默认 pointer-events: auto，这是对的——它得拦截点击，防止用户误操作背后内容。但很多人误加 pointer-events: none，结果点了没反应，还以为 JS 绑定失败。
真实需求分两种：
- 点遮罩关闭弹窗 → 保持
pointer-events: auto，并在 JS 中判断event.target === overlayEl，避免点到弹窗内部误触发 - 遮罩纯视觉、关闭靠 × 按钮或 ESC → 可设
pointer-events: none，但必须确认弹窗本身有pointer-events: auto（默认就是） - 千万别给遮罩设
opacity后又加pointer-events: none——既没交互又看不清，纯粹自废武功
最易忽略的一点：遮罩和弹窗的 z-index 数值本身不重要，重要的是它们是否处于同一层叠上下文。哪怕你写 z-index: 999999，只要父级有 transform: scale(1)，它就被锁死在那个小世界里，永远盖不过隔壁没被限制的 header。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
