根本原因是定位参考系不稳定；父容器未设position: relative时图标相对body定位，而body的尺寸、边距、滚动条宽度在不同设备和缩放下不一致，导致偏移。
为什么绝对定位图标在缩放后总偏移
根本原因不是 position: absolute 本身有问题，而是它依赖的定位参考系不稳定。比如父容器没设 position: relative，图标就直接相对于 <body> 定位；而 <body> 的尺寸、边距、滚动条宽度在不同设备和缩放比例下都不一致——这会导致图标在 125% 缩放时向右下“漂”几像素，在小屏上甚至被裁掉一半。
必须给图标父容器加 position: relative
这是所有稳定对齐的前提。没有它，top/left 就没锚点，后续再调单位也没用。
-
.icon-container必须显式声明position: relative，哪怕它看起来“不需要定位” - 避免父容器同时存在
overflow: hidden和position: relative组合——某些旧版 Safari 会截断absolute子元素 - 如果图标要贴着某个文字或按钮右对齐，别用
right: 0硬写，而是让父容器（如按钮）自己设position: relative，再把图标作为它的子元素
用 em 或 rem 替代 px 控制偏移量
图标位置要随字体缩放同步变化，否则浏览器放大时图标会“卡在原地”，文字却变大了，视觉上就错位。
-
top: 0.5em比top: 8px更可靠——em基于当前父元素字号，缩放时自动等比调整 - 若图标需与文字基线对齐，优先用
vertical-align: middle+display: inline-block，而不是靠top猜像素值 - 避免混用单位：不要
left: 1rem和top: 6px同时出现，缩放时偏差会叠加
响应式图标尺寸必须与文字尺寸联动
图标宽高不随缩放变化，是错位最隐蔽的来源。比如一个 width: 24px 的 SVG，在 150% 缩放时仍保持 24px 物理像素，而周围文字已变成 1.5 倍大小，必然显得小且偏上。
立即学习“前端免费学习笔记（深入）”；
- 把图标设为
width: 1em、height: 1em，它就会严格跟随父级font-size缩放 - 如果用背景图，改用
background-size: contain+padding-bottom配合aspect-ratio控制比例，而非固定height - 媒体查询中统一调控：
@media (max-width: 480px) { .icon-container { font-size: 14px; } }，然后所有em偏移和图标尺寸自动适配
真正难的不是写对一行 position: absolute，而是确保从父容器定位上下文、单位选择到图标自身缩放逻辑，全部落在同一套相对度量体系里。漏掉任意一环，缩放或换设备时都会出问题。
