badge错位主因是父容器未设position: relative，导致绝对定位向上回溯至body；需外层div设relative及inline-block/block；用transform: translate(50%, -50%)精准对齐右上角内侧。
父容器没设 position: relative，角标一定飘走
这是 90% 的 Badge 错位根源。只要 .badge 的直接父元素（比如 .avatar-wrapper 或 .card）没写 position: relative，position: absolute 就会一路往上找——最终相对于 定位，直接贴到视口右上角。
特别注意：<img>、<i></i> 这类 inline 元素不能直接加 position: relative，高度不可靠；必须在外层套一层 <div> 并设 <code>display: inline-block 或 block。
top: 0; right: 0; 只是起点，不是终点
只写 top: 0; right: 0; 会让 Badge 的左上角钉在父容器右上角，视觉上明显“浮”在外面，尤其头像带边框或阴影时更突兀。
- 用
transform: translate(50%, -50%)把 Badge 向右下推回自身宽高的一半，等效于让它的右上角精准贴合父容器右上角内侧边缘 - 这个方案不依赖固定像素值，改
font-size或padding不用重调数值 - 别用负
margin（如margin-top: -4px），它对尺寸变化零容忍，响应式下极易失效
角标被裁切、点不到、层级错乱的常见原因
定位没错，但显示异常往往出在渲染层：
- 父容器有
overflow: hidden（很多 UI 库卡片默认加了），Badge 超出部分会被直接裁掉；要么删掉该声明，要么给 Badge 加transform: translateZ(0)强制创建新层叠上下文 - Badge 挡住底下的按钮或图片点击区域？加
pointer-events: none；如果 Badge 内部有可点击子元素（比如关闭按钮），再单独给它设pointer-events: auto -
z-index别设成9999，z-index: 1够用，避免和弹窗、Tooltip 等组件冲突
圆角头像 + 响应式缩放时的隐藏坑
当头像用 border-radius: 50% 且尺寸随屏幕变化时，两个细节容易忽略：
- Badge 必须有明确宽高（比如
width: 16px; height: 16px;），否则transform: translate(50%, -50%)的基准会漂移 - 纯 CSS 很难让 Badge 尺寸随头像等比缩放；若需严格适配，得用
clamp()控制字号，或监听resize用 JS 动态更新font-size和padding
多数项目里，固定尺寸 + transform 已足够稳；真要动态缩放，优先考虑是否值得为这一个角标引入 JS 逻辑。
