定位缩放错位本质是top/left被锁定在初始像素坐标系，inset可自动重映射；vw/vh需calc组合控制参照逻辑；transform微调精度达0.1px；须避免参照系塌陷与非整数度数导致的渲染失效。
定位元素在缩放时错位，本质是top/left被“冻住”了
浏览器 Ctrl+/Cmd+ 缩放时，top: 20px 或 left: 50% 的值不会重算，而是锁定在初始视口像素坐标系里。缩放后渲染逻辑变了，但数值没变——视觉上就偏了。这不是 bug，是设计使然。
-
inset是现代解法：inset: 10px auto auto 20px直接锚定当前视口边缘，缩放时自动重映射，不依赖初始快照 - 别混用：
inset: 10px; left: 50%会让left覆盖inset的左值，行为不可控 - 兼容性兜底必须写全：
top: 10px; right: auto; bottom: auto; left: 20px，不能只补top和left
用vw/vh时，calc()组合比单用更稳
left: 20vw 在 1920px 屏上是 384px，但在 375px 屏上只有 75px，按钮可能直接飞出视口。关键不是换单位，而是控制参照逻辑。
- 固定尺寸要显式参与计算：
left: calc(50vw - 100px)（假设元素宽 200px，居中需减半） - 避开
calc(50vh - 20px)这类写法：其中50vh不随缩放更新，20px固定，差值越拉越大 - 垂直居中优先用
top: 50%; transform: translateY(-50%)，而不是单独设top: calc(50vh - 100px)
transform微调能绕过layout舍入，但必须整数对齐
当 top 算出来是 42.3px 这类带小数的值时，margin-top: -0.3px 无效（参与 layout 阶段仍被舍入），但 transform: translateY(-0.3px) 可以真正生效——它走合成层，精度到 0.1px。
- 不要混用：
top: 20px; transform: translateY(-0.3px)是先整数 layout 再微调，缝隙照旧 - 动态 JS 控制时，必须用
Math.round()取整后再赋值：el.style.transform = `translateY(${Math.round(y)}px)` - 移动端 Safari 对
rotate()值极其敏感：非整数度数会直接让-webkit-font-smoothing: subpixel-antialiased失效
真正麻烦的不是某个值写错，而是参照物本身不稳定
错位往往是叠加效应：position: absolute 依赖最近的定位祖先，而这个祖先若用了 transform: scale()、font-size 动态缩放、或被第三方样式覆盖了 box-sizing，参照系就塌了。
- 检查父容器是否意外触发了
transform—— 它会让getBoundingClientRect()返回的坐标失真 - 用 Chrome DevTools 的 “Layout Shift Regions” 高亮跳动区域，快速定位是哪个元素在偏移
- 如果用了 rem 方案，必须用
clamp(12px, 2.666vw, 16px)锚定最小根字号，否则0.1rem在小屏下可能跌破 1px，连带所有定位基准失准
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
