position: fixed 是实现全屏遮罩弹窗的唯一可靠方案，需配合 inset: 0（或 top/right/bottom/left: 0）撑满视口，用 display: flex 居中弹窗，并注意 rgba 背景、足够 z-index 及 pointer-events 分层控制。
用 position: fixed 实现全屏遮罩弹窗，核心就一条：遮罩必须脱离文档流、锚定视口、不随滚动偏移——fixed 是唯一可靠选择，其他方案在滚动、嵌套、移动端 Safari 下大概率漏边或错位。
为什么只写 position: fixed 不够？
因为 fixed 元素默认尺寸由内容决定，不是自动铺满。不显式撑开，它就缩成一个点（top: auto; left: auto 的默认行为）。常见错误是只加 position: fixed 就以为完事，结果页面上根本看不到遮罩。
- 必须加定位值：
inset: 0（推荐）或等效的top: 0; right: 0; bottom: 0; left: 0 - 旧浏览器兼容可并行写两套：
inset: 0+ 四边0，现代浏览器会优先用inset - 别用
width: 100%; height: 100%：它依赖父容器，滚动条占位时右侧露白；100vw/100vh在 iOS Safari 地址栏收放时会漏底
display: flex 居中比 transform 更稳
把弹窗作为遮罩的直接子元素，用 display: flex; justify-content: center; align-items: center 居中，不依赖弹窗自身宽高，也不受字体加载、缩放、横竖屏切换影响。而 top: 50%; left: 50%; transform: translate(-50%, -50%) 在 iOS Safari 地址栏跳变、安卓 WebView 渲染差异下容易偏移。
- 遮罩层必须设
display: flex，否则justify-content和align-items不生效 - 弹窗本身保持
position: static（默认），不用absolute或fixed，避免定位参考混乱 - 若弹窗内含
position: absolute子元素，它们的定位参考是弹窗自身，不是视口——这点常被误认为 bug
背景透明和层级最容易踩的三个坑
遮罩看不见、点不中、弹窗被盖住，90% 出在这三处：
- 背景必须用
background-color: rgba(0, 0, 0, 0.6)，禁用opacity：后者会让整个遮罩及其子元素（包括关闭按钮、图标）都发虚 -
z-index要足够高（比如9999），且确保遮罩和弹窗同级或共属干净父容器；中间任意祖先加了transform、opacity、filter都会创建新层叠上下文，让z-index失效 -
pointer-events要分层控制：遮罩根元素设auto（默认），可点击区域（如关闭按钮）无需额外设置；若需点击遮罩关闭但不关弹窗内容，得在弹窗容器上加pointer-events: auto并调用e.stopPropagation()
真正难的不是写几行 CSS，而是理解遮罩和弹窗必须是两个分离、同级、无干扰祖先的 DOM 元素——任何试图“把弹窗塞进遮罩再靠 margin auto 居中”的做法，在复杂布局或移动端下都会翻车。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
