modal偏移不准是因为absolute定位基准是最近已定位祖先而非视口；应给父容器设position: relative，modal自身用absolute+top/left 50%配合transform: translate(-50%, -50%)居中。
modal用position: absolute时为什么总偏移不准
因为absolute的定位基准是最近的已定位祖先（position值为relative、absolute、fixed或sticky），不是视口。如果父容器没设position: relative，模态框会往上找，甚至跑到body外侧。
实操建议：
- 给模态框的直接父容器加
position: relative（通常就是遮罩层.modal-overlay） - 模态框自身设
position: absolute; top: 50%; left: 50% - 必须配合
transform: translate(-50%, -50%)——这是关键，不是可选项 - 避免用
margin-top/margin-left负值模拟居中，响应式下极易错位
transform: translate(-50%, -50%)比margin负值更可靠的原因
负margin需要预先知道模态框宽高，而translate基于自身尺寸计算，不依赖具体像素值，天然适配max-width、fit-content或动态内容。
常见错误现象：
立即学习“前端免费学习笔记（深入）”；
- 文字变多后模态框变宽，但
margin-left没更新，整体右偏 - 使用
rem或em设置宽高时，margin换算易出错 - 在
zoom或缩放页面中，margin值不变，但实际视觉位置漂移
性能上，transform触发合成层，重绘开销远低于top/left连续变更，尤其在动画场景下更顺滑。
移动端 Safari 下position: fixed模态框滚动时消失怎么办
这不是 bug，是 Safari 对fixed在滚动区域内的主动降级行为——当键盘弹出或页面滚动时，它会把fixed元素当absolute处理，导致定位基准突变。
解决方案只有两个有效路径：
- 放弃
position: fixed，改用position: absolute+ 父容器position: relative，并确保父容器高度撑满视口（如min-height: 100vh） - 若必须用
fixed，需监听resize和focusin事件，在键盘弹出后强制重置top值（但仍有延迟和抖动风险） - 切勿依赖
viewport-fit=cover或env(safe-area-inset-*)来“修”这个行为，它们解决的是刘海屏适配，不是定位失效
IE11 兼容时transform居中失效的隐藏条件
IE11 支持transform，但要求触发它的元素不能同时有filter（如blur()）、will-change或某些backface-visibility组合，否则translate会被静默忽略。
排查要点：
- 检查是否误加了
filter: drop-shadow(...)在模态框上 - 确认
transform声明写在transition之后（IE11 解析顺序敏感） - 避免用
transform: translate(-50%, -50%) scale(1)这类冗余写法，IE11 对多函数解析不稳定 - 如果用了
display: grid做外层布局，IE11 的grid与transform叠加可能引发渲染异常，建议降级为flex
真正麻烦的不是写法本身，而是这些限制只在特定 DOM 结构+CSS 组合下才暴露，本地测不出，上线后用户一操作就偏。
