top/left 在缩放时“飞走”是因为其值锁定在初始视口像素坐标系，缩放后css像素与设备像素映射变化导致视觉偏移；应改用inset、vw/vh或transform: scale()等视口锚定方案。
为什么 top/left 在缩放时会“飞走”
浏览器缩放（Ctrl+/Cmd+）时，top、left 这类绝对定位值被锁定在初始视口像素坐标系里——缩放后渲染逻辑变了，但数值没变，视觉上就偏移了。这不是 bug，是 CSS 像素与设备像素映射关系变化导致的必然行为。
常见现象包括：position: fixed 的导航栏缩放后脱离顶部、弹窗右上角错位、图标在按钮内上下漂移。尤其当父容器有 transform（哪怕只是 translateZ(0)）时，还会创建新包含块，让 top 计算基准进一步偏移。
用 inset 替代 top/left/right/bottom
inset 是现代 CSS 对四边定位的语义化简写，它直接锚定到当前视口边缘，不依赖初始像素冻结，缩放时更稳定。
-
inset: 0等价于top: 0; right: 0; bottom: 0; left: 0，但行为更可靠 - 避免混用：
inset: 0; left: 50%会导致left覆盖inset的左值，结果不可控 - 兼容性需兜底：Chrome 103+、Firefox 102+、Safari 16.4+ 支持；旧版本回退到传统四值写法
优先用 vw/vh，慎用 calc() 混合单位
vw/vh 基于视口尺寸计算，缩放时比例恒定，适合做全局布局尺度控制。
-
left: 20vw始终是视口宽度的 20%，不受父容器transform或padding干扰 - 避免
calc(20vw + 10px)：其中10px部分仍会跳，纯视口单位才稳 -
calc(50vh - 20px)更危险：50vh 不随缩放更新，20px 固定，差值越拉越大 - 若需微调偏移，优先用
transform: translateX(-50%)，它的百分比基于自身尺寸，缩放时比例一致
别依赖浏览器原生缩放，改用 transform: scale()
浏览器 Ctrl+/Cmd+ 缩放会改变整个渲染树基准，position: fixed 元素必然错位——这不是 JS 能修的，是底层渲染管线行为。
- 真正可控的方式是放弃它：把
transform: scale(1.2)应用在最外层容器（如#app），而非单个定位元素 - 必须同步设
transform-origin（如0 0或50% 50%），对齐设计稿基准点 - 不要对含子元素的容器用
scale()：fixed元素会脱离视口定位流，变成相对该容器定位 - 若真要用
fixed且必须支持缩放，只能靠visualViewportAPI 获取真实缩放比例做微调（Chrome 唯一可靠途径）
最易被忽略的是：inset 和 vw/vh 都要求你彻底放弃“用 px 锚定视觉位置”的直觉——缩放场景下，所有依赖初始像素坐标的写法都会失效，必须转向视口锚定或主动变换控制。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
