父容器必须设 position: relative，否则徽标会飘到页面顶部；正确锚定需用 top: 0; right: 0; transform: translate(50%, -50%)；还需防事件拦截（pointer-events: none）和溢出裁剪（检查 overflow）。
父容器必须设 position: relative，否则徽标会飘到页面顶部
移动端 Badge 错位的头号原因不是写法错，而是父容器漏了 position: relative。只要没这行，position: absolute 的徽标就会逐级往上找定位上下文——大概率落到 <body> 上，直接贴着视口右上角，和你想要的图标/头像毫无关系。
特别注意：position: relative 必须加在徽标的**直接父元素**上，比如：
– 购物车图标用 <button> 包裹，就给 <button> 加；
– 头像用 <img>，就得在外层套一层 <div class="avatar-wrapper"> 再加；
– 别试图给 <img> 或 <i> 自身设 position: relative，它们是 inline 元素，高度不可靠，定位基准会偏移。
top: 0; right: 0; transform: translate(50%, -50%) 是右上角锚定的黄金组合
只写 top: 0; right: 0 会让徽标左上角顶到父容器右上角，视觉上明显“浮”在外面。真实需求是徽标右上角内侧贴合目标元素（如头像）的右上角内侧边缘。
这个组合能精准实现：
– top: 0; right: 0 把徽标左上角先钉到父容器右上角；
– transform: translate(50%, -50%) 再把它向右下推回自身宽高的一半，等效于让徽标“中心点”对齐右上角顶点，最终右上角自然贴合；
– 不依赖固定像素值，字号、padding 变化时无需重调数值；
– transform 不触发重排，性能比负 margin 更稳。
前提是徽标要有明确宽高，比如红点：width: 16px; height: 16px; border-radius: 50%。
移动端必须防事件拦截和溢出裁剪
绝对定位的徽标默认会挡住背后的点击区域，用户点不到按钮或链接。解决方法很简单：
– 给徽标加 pointer-events: none；
– 如果徽标内部有可点击子元素（如清空按钮），再给那个子元素单独设 pointer-events: auto；
– 同时加 z-index: 1 确保显示层级，但别设成 9999 这种魔数，避免和其他弹层冲突。
另一个隐形陷阱是父容器设置了 overflow: hidden（常见于滚动卡片列表或 flex 容器），会导致徽标被裁掉。检查父级是否意外创建了 BFC（比如有 opacity、transform 或 overflow-x: scroll），必要时改用 CSS Grid 替代绝对定位。
立即学习“前端免费学习笔记（深入）”；
响应式下别硬写像素偏移，优先用 inset 或 rem
移动端屏幕尺寸多变，top: -6px; right: -6px 这类写死的像素值在小屏下极易出界或贴边。更稳妥的做法：
– 改用逻辑属性：inset: 0 auto auto 0; transform: translate(50%, -50%)，语义清晰且 RTL 自动适配；
– 或统一用 rem 单位：top: -0.25rem; right: -0.25rem，随根字体缩放；
– 数字超 99 时强制显示 99+，避免宽度突增撑开紧凑布局；
– 若需动态适配缩放，纯 CSS 难以覆盖所有场景，得结合 window.addEventListener('resize') 监听并更新 style.top/style.right。
真正难的不是怎么写定位，而是定位上下文是否干净、事件是否透传、裁剪是否规避——这三个点漏掉任何一个，移动端 Badge 就会当场失效。
