top/left 在缩放时必然错位，因浏览器仅拉伸渲染层而不重算像素值，导致锚点漂移；推荐用 inset、vw/vh 单位或 transform: scale() 替代，并注意兼容性与嵌套结构重构。
为什么 top/left 在缩放时必然错位
浏览器缩放（Ctrl+/Cmd+）不重算 top: 20px 这类值，它只是拉伸整个渲染层——20px 仍被解释为“20 个缩放后的 CSS 像素”，但父容器尺寸、视口逻辑像素、甚至 background-size 都已按比例重算，导致锚点漂移。这不是 bug，是 CSS 像素映射机制决定的。
用 inset 替代 top/right/bottom/left
inset 是现代定位的语义化替代方案，直接锚定到当前视口或包含块边缘，缩放时行为更稳定：
-
inset: 0等价于top: 0; right: 0; bottom: 0; left: 0，但不会被初始像素坐标“冻结” - 避免混用：
inset: 0; left: 50%会覆盖左值，结果不可控 - 兼容性需 fallback：
inset仅支持 Chrome 103+、Firefox 102+、Safari 16.4+；旧版本需回退为四值写法
改用 vw/vh 单位，但别混 calc()
vw/vh 基于视口尺寸计算，缩放时比例恒定，比 % 更可靠（不受父容器 transform 干扰）：
- ✅ 安全写法：
left: 15vw、top: 8vh - ❌ 危险写法：
calc(15vw + 10px)——10px部分仍会跳 - ❌ 更危险：
calc(50vh - 20px)——50vh不随缩放更新，20px固定，差值越拉越大
彻底绕开缩放问题：用 transform: scale() 主动控制
放弃依赖浏览器原生缩放，把 transform: scale(1.25) 应用在最外层容器（如 #app），而非单个元素：
- 必须同步设置
transform-origin（如0 0或50% 50%），对齐设计稿基准点 - 禁用子元素的
position: fixed—— 否则它会脱离视口，变成相对该容器定位 - 不监听
resize或伪造zoom事件：这些事件不触发，且无法获取真实缩放系数
真正难处理的是多层 absolute 嵌套 + 父容器也用了 absolute 的结构——这种情况下，错位是必然的，重构为 flex 或 grid 几乎是唯一可靠解法。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
