不能只靠top: 50%和left: 50%居中，因为二者仅将元素左上角移至中心点，导致模态框整体偏右下；必须配合transform: translate(-50%, -50%)以其自身宽高为基准反向偏移一半，才能实现视觉中心对齐。
直接用 position: fixed + transform: translate(-50%, -50%) 就能稳稳居中，不需要 JS 也能搭出结构，但显隐控制必须靠 JS 或 :target —— 纯 CSS 方案有硬伤，不推荐上线用。
为什么不能只靠 top: 50%; left: 50% 居中？
因为 top 和 left 是按元素左上角定位的，光设 50% 只会让角点落在中心，框体本身会偏右下。必须搭配 transform: translate(-50%, -50%) 把自身回拉一半宽高。
- 漏写
transform→ 模态框右下角卡在屏幕中央，内容被切掉 - 只写
translate(-50%, 0)→ 水平居中但垂直偏高 - 父容器没设
width/height（比如遮罩层用了min-height: 100vh而非height: 100vh）→top: 50%计算基准失效
z-index 冲突时模态框被盖住怎么办？
遮罩层和模态框必须是定位元素（position: fixed 或 absolute），否则 z-index 不生效。常见冲突点不是数值不够大，而是层级关系错乱。
- 遮罩层设
z-index: 1000，模态框本体设z-index: 1001，留出空间给内部组件（如日期选择器可能需要1050） - 遇到
<select></select>或<iframe></iframe>穿透，遮罩层加pointer-events: none，模态框容器单独设pointer-events: auto - 全局统一写
z-index: 9999容易和第三方库（如 Ant Design 的1050）打架，建议用 CSS 变量统一管理：--z-modal-overlay: 1000
移动端 Safari 中模态框滚动错位怎么修？
iOS Safari 在软键盘弹出后，position: fixed 常失效，导致模态框被顶出视口或固定在错误位置。
- 遮罩层高度别用
height: 100vh，改用min-height: 100vh防止键盘撑开后高度塌缩 - 模态框容器加
transform: translateZ(0)强制硬件加速，缓解重绘延迟 - 监听
window.resize事件，在键盘收起后手动重置top值（注意：有 100–300ms 延迟，不能完全消除抖动） - 更稳妥的做法是放弃
fixed，改用position: absolute+ 父容器position: relative; min-height: 100vh
真正麻烦的从来不是“怎么让它显示出来”，而是“怎么让它不干扰焦点、不穿透点击、不在 iOS 上飘走、不被屏幕阅读器跳过”——这些细节没处理好，用户一按 Tab 键就跳出弹窗，或者盲人用户根本不知道模态框已打开。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
