优先改用 position: sticky 或 position: relative + transform；inset 替代 top/left 更稳定，但需注意兼容性与混用风险；vw/vh 安全，calc 混合单位慎用；visualViewport 仅作最后兜底。
用 inset 替代 top/left 等传统定位属性
缩放时 fixed 元素“飞走”，本质是 top: 20px 这类值被锁定在初始视口像素坐标系里，缩放后数值不变但渲染基准变了。而 inset 是语义化简写，它不依赖初始尺寸冻结逻辑，直接锚定当前视觉视口边缘：inset: 0 等价于 top: 0; right: 0; bottom: 0; left: 0，但更稳定。
注意别混用：inset: 0; left: 50% 会让 left 覆盖 inset 的左值，行为不可控。
兼容性需兜底：Chrome 103+、Firefox 102+、Safari 16.4+ 支持；旧版本 fallback 到四值写法即可。
优先改用 position: sticky 或 position: relative + transform
fixed 在缩放场景下本就是高危选择，尤其涉及底部操作栏、悬浮按钮等关键交互层时。position: sticky 不直接受缩放干扰，iOS 11+/Chrome 56+ 均支持，适合顶部导航或底部工具栏。
居中类需求（如弹窗、气泡）应放弃 top: 50%; left: 50%，改用 position: relative + transform: translate(-50%, -50%) —— 因为 transform 的百分比基于元素自身宽高，缩放时比例恒定。
若必须保留 fixed，避免嵌套多层 absolute 或祖先带 transform，否则错位会指数级放大。
慎用 vw/vh 和 calc() 混合单位
left: 20vw 是安全的，它始终锚定当前视口宽度的 20%，缩放时比例不变。
但 calc(20vw + 10px) 中的 10px 部分仍会跳，纯视口单位才稳。
同理，calc(50vh - 20px) 的差值会随缩放越拉越大——因为 50vh 不重算，20px 固定，二者不再匹配。
如果必须微调偏移，优先用 transform: translateX(-50%)，而不是靠 left 加减像素值。
监听 visualViewport 动态修正（仅现代浏览器）
当其他方案都不可行，且你明确只支持 Chrome/Firefox/Safari 新版本时，可用 visualViewport API 获取真实缩放状态：visualViewport.addEventListener('resize', () => { el.style.top = visualViewport.offsetTop + 'px'; });
注意：iOS Safari 对该事件响应滞后甚至丢失，建议加 scroll 事件兜底，并用 requestAnimationFrame 节流；
别只信事件本身，要对比 visualViewport.scale 前后值，确认是否真发生了缩放变化。
这个方案不能替代布局重构，只是最后防线——它解决的是“已错位后怎么拉回来”，不是“为什么一开始会错位”。
立即学习“前端免费学习笔记（深入）”；
真正容易被忽略的点是：缩放错位从来不是单一 CSS 属性的问题，而是整个定位模型与浏览器渲染管线的耦合结果。哪怕你把所有单位都换成 rem 或 dvh，只要还在用 fixed 锚定逻辑视口，就逃不开坐标系漂移。最稳妥的做法，是把“必须用 fixed”的执念先放下。
