全屏遮罩层必须用 position: fixed + top/right/bottom/left: 0 或 100vw/100vh，配合 background-color: rgba() 和足够 z-index；禁用 opacity 以免子元素变透明，弹窗宜嵌套于遮罩内并用 flex 居中。
直接用 background-color: rgba() 给遮罩容器设半透背景，配合 position: fixed 和 z-index 就能跑通，不用额外 DOM 元素或 JS 控制显隐逻辑。
遮罩层必须用 position: fixed + 100vw/100vh
用 width: 100% 和 height: 100% 容易被父容器裁剪，滚动时还可能露底；100vh 在移动端 Safari 地址栏缩放时会计算错误，导致遮罩高度不足。正确写法是：
-
top: 0; right: 0; bottom: 0; left: 0;最稳，兼容所有浏览器 - 或者
width: 100vw; height: 100vh;，但需确认页面无横向滚动条干扰 - 务必设
z-index（比如1000），否则可能被其他 fixed 元素盖住
别用 opacity，死磕 rgba() 背景色
opacity: 0.5 会让整个元素及其所有子节点（文字、按钮、图标）一起变淡，无法单独恢复清晰度。而 background-color: rgba(0, 0, 0, 0.6) 只影响背景色本身：
- 子元素文字、边框、阴影保持原样，可读性不打折
- 十六进制带 alpha（如
#0008）在旧版 Safari 和部分安卓 WebView 中渲染异常，优先用rgba() - 如果遮罩层要加
border或box-shadow，它们不受rgba()影响，可独立控制
弹窗居中别手写 transform: translate() —— 用 Flex 更稳
把弹窗放在遮罩层内部，对遮罩层设 display: flex; justify-content: center; align-items: center;，弹窗自身就自动居中：
- 不用算
top: 50%; left: 50%再手动偏移，避免因宽高变化导致错位 - 弹窗建议设
max-width（如400px）和width: 90%，兼顾小屏与大屏 - 如果弹窗内容有交互（比如表单、按钮），确保它和遮罩层同级或至少没被
overflow: hidden截断
移动端点击区域太小？pointer-events 得配好
遮罩层默认响应点击，但若只想让它做视觉提示（比如仅用于背景压暗），不希望点它就关闭弹窗，就得明确控制事件穿透：
- 设
pointer-events: none;→ 遮罩不拦截点击，底层元素可响应 - 设
pointer-events: auto;（默认）→ 遮罩自己响应点击，适合点击关闭场景 - 移动端最小可点击区域建议 ≥
44px × 44px，遮罩层本身足够大，但关闭按钮得单独检查尺寸
真正容易被忽略的是：遮罩层和弹窗的 DOM 层级关系。哪怕 CSS 写得再准，只要弹窗是遮罩层的子元素，且遮罩层又套在某个触发 transform 或 opacity 的祖先里，就可能意外创建新的层叠上下文，导致 z-index 失效——这时候不是样式写错了，是结构卡住了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
