根本原因是视口缩放不触发resize事件但改变设备像素比，导致px定位等比缩放而父容器按逻辑像素计算；百分比定位需确保包含块为html/body并撑满视口，transform百分比基于自身尺寸，viewport meta必须配齐且推荐监听visualViewport补偿缩放。
定位元素在缩放时跑偏的根本原因
视口缩放（比如 Ctrl + 鼠标滚轮、iOS 双指捏合）不会触发 resize 事件，也不会重排布局，但会改变设备像素比和渲染尺寸的映射关系。绝对定位元素若依赖 px 值（如 top: 20px），其物理像素偏移量被等比例缩放，而父容器的 width/height 却按逻辑像素计算，导致视觉错位。
用百分比替代 px 定位的实操要点
百分比定位本身不解决所有问题——它只对包含块（containing block）生效，且行为因定位方式而异：
-
position: absolute下，top/left的百分比基于包含块的 内容区高度/宽度（不含 padding、border），不是视口 - 想锚定视口比例？得让包含块是
html或body，并确保它们撑满视口：html, body { height: 100%; margin: 0; } -
transform: translateX(10%)的百分比基于元素自身宽高，和缩放无关，适合微调；但注意它不脱离文档流，可能影响其他元素布局
viewport meta 标签必须配齐
很多偏移问题其实卡在基础配置上。没有正确设置 <meta name="viewport">，移动端缩放行为不可控，CSS 百分比定位会失去参照基准：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
其中 user-scalable=no 虽然能禁用缩放，但不符合可访问性要求；更稳妥的是保留缩放，改用响应式定位逻辑。如果必须支持缩放，建议至少保留 maximum-scale=5.0 并配合 JS 监听 visualViewport 变化做补偿。
立即学习“前端免费学习笔记（深入）”；
遇到 transform 缩放后定位失效怎么办
当父容器用了 transform: scale(0.8)，子元素的 position: absolute 百分比仍按缩放前尺寸计算，但渲染位置被整体拉伸，看起来又偏了：
- 避免对含绝对定位子元素的容器使用
transform: scale() - 改用
zoom（仅 Chrome/Edge 支持，且已废弃）风险更高，不要用 - 真要缩放整个模块？把
scale应用到最外层 wrapper，并让所有内部定位都用transform计算，例如：transform: translate(20%, 10%) scale(0.8)，这样偏移和缩放同步发生
复杂点在于：百分比定位看似简单，但它的“百分比”到底相对于谁，得一层层查包含块、检查 box-sizing、确认是否被 transform 分离出新的 containing block——漏掉任意一环，缩放时就准会偏。
