position: fixed 是全屏遮罩唯一可靠选择，因其脱离文档流、锚定视口、不随滚动偏移；需配合 inset: 0、高 z-index、rgba 背景及 transform 居中弹窗。
为什么 position: fixed 是遮罩层的起点
全屏遮罩必须脱离文档流、覆盖所有内容，且不随滚动偏移——position: fixed 是唯一可靠选择。用 absolute 会受父容器限制，用 sticky 行为不可控，而 fixed 天然锚定视口。
常见错误是只设 top: 0; left: 0; width: 100%; height: 100%，但这样弹窗内容仍需额外居中，且容易忽略 z-index 层级冲突。
-
z-index值要足够高（比如9999），避免被第三方 UI 库或广告脚本盖住 - 必须加
inset: 0（等价于top: 0; right: 0; bottom: 0; left: 0），更简洁且兼容现代浏览器 - 遮罩背景建议用半透黑：
background-color: rgba(0, 0, 0, 0.7)，别用opacity，否则会透出子元素
用 transform: translate(-50%, -50%) 居中弹窗最稳
固定宽高的弹窗可用 margin: auto + top/bottom/left/right: 0，但实际项目中弹窗尺寸常动态（比如文字长度不定、响应式切换），这时 transform 方案更鲁棒。
关键点在于：先用 top: 50%; left: 50% 把元素左上角挪到视口中心，再用 transform: translate(-50%, -50%) 反向拉回自身宽高的一半。
- 必须同时设置
top和left，只设一个方向会导致偏移 - 不要写成
transform: translateX(-50%) translateY(-50%)，虽然等效，但多写字符没意义 - 如果弹窗内有
position: absolute子元素，注意它们的定位参考是弹窗本身，不是视口
响应式下怎么避免弹窗溢出或留白过大
PC 上居中没问题，但手机竖屏时，若弹窗高度超过视口，会出现滚动条或底部截断。不能只靠 max-height，得配合 overflow-y: auto 和内边距控制。
- 给弹窗内容区（不是遮罩层）设
max-height: 80vh和overflow-y: auto，保留顶部/底部呼吸空间 - 用
min-width和max-width限定宽度，比如min-width: 320px; max-width: 90vw，防止小屏过窄或大屏过宽 - 慎用
height: 100%，它会让弹窗撑满整个遮罩层高度，而不是内容自适应
键盘关闭（Esc）和点击遮罩关闭的 DOM 结构要点
功能实现依赖结构合理性：遮罩层必须包裹弹窗，且事件监听不能漏掉焦点穿透。常见坑是把 click 绑在遮罩层上却忘了阻止冒泡，导致点弹窗内部也触发关闭。
- HTML 结构推荐：
<div class="modal-overlay"> <div class="modal-content">...</div> </div>
，而非两个平级div - 监听遮罩层
click时，检查e.target === e.currentTarget，确保只关遮罩本身 - 加
tabindex="-1"到.modal-overlay，让Esc关闭逻辑能正确聚焦并监听 - 打开弹窗后记得
document.body.style.overflow = 'hidden'，关掉后恢复，否则滚动条会打架
transform 可能引发渲染异常，这时候得切回 margin: auto + display: flex 的方案，但要确保父容器是 fixed 且 inset: 0。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
