移动端徽标错位主因是父容器缺失position: relative；必须加在直接父元素上，配合top: 0; right: 0; transform: translate(50%, -50%)实现精准右上角居中，并设pointer-events: none避免事件拦截。
移动端徽标（Badge）错位，90% 是因为父容器漏了 position: relative —— 不是写法错，而是定位上下文根本不存在。
为什么必须给父容器加 position: relative
position: absolute 的元素会逐级向上查找「最近的已定位祖先」作为参考系。如果所有父级都是默认 static，它就直接落到 <body> 上，贴着视口右上角飘走，和你想要的图标/头像完全脱钩。
- 必须加在徽标的直接父元素上，比如：
<button>、<div class="avatar-wrapper"> - 别给
<img>或<i>自身设position: relative—— 它们是 inline 元素，基线不可靠，top会偏移 -
position: relative本身不改变布局，也不占额外空间，纯属“打地基”
top/right + transform 是最稳的右上角定位组合
只用 top: 0; right: 0 会让徽标边缘紧贴父容器边框，视觉上常显得太靠外；加 transform: translate(50%, -50%) 才能真正实现「以徽标中心为锚点，对齐父容器右上角」。
- 错误写法：
top: -5px; right: -5px—— 像素值依赖徽标尺寸，换大小就得重调 - 正确写法：
top: 0; right: 0; transform: translate(50%, -50%)—— 尺寸无关，自动居中对齐 - 如果徽标需要「缩进一点」，优先调
transform的百分比（如translate(60%, -60%)），而不是改top/right
容易被忽略的两个交互细节
徽标盖在可点击元素（如按钮、头像）上时，若不做处理，会拦截鼠标/触摸事件，导致底层元素点不动。
立即学习“前端免费学习笔记（深入）”；
- 加
pointer-events: none让徽标“透明化”，点击穿透到底层 - 但注意：如果徽标本身要响应点击（比如跳转未读消息页），那就不能关
pointer-events，得用其他方式隔离事件区域 - 检查父容器是否设置了
overflow: hidden—— 徽标超出部分会被裁掉，尤其在圆角容器或小尺寸头像上很常见
真正卡住人的从来不是 absolute 怎么写，而是谁当“爹”、谁来“让位”、谁负责“不挡事”。这三个问题没理清，调再多次 top 都只是碰运气。
