必须给徽标的直接父元素加 position: relative，否则绝对定位徽标会相对于 body 定位而错位；配合 top: 0; right: 0; transform: translate(50%, -50%) 实现右上角精准锚定，并注意 pointer-events 和 overflow 处理。
徽标用 position: absolute 能实现角标，但**90% 的错位问题都出在父容器漏了 position: relative**——不是写法错，是定位上下文根本不存在。
父容器必须加 position: relative
绝对定位元素会逐级向上找「最近的已定位祖先」。如果所有父级都是默认 static，它就直接相对于 body 定位，徽标会飞到整个页面右上角，和你放的头像、按钮完全脱钩。
- 必须加在徽标的直接父元素上，比如
<button class="relative"></button>或<div class="avatar-wrapper relative"> <li>别给 <code><img alt="怎样在CSS中用绝对定位实现徽标Badge角标展示？" >或<i></i>自身加position: relative：它们是 inline 元素，基线不可靠，top会偏移 - 推荐加
display: inline-block防止父容器宽度塌陷（尤其当子元素是纯文字或图标时） -
top: 0; right: 0先把徽标左上角钉到父容器右上角 -
transform: translate(50%, -50%)再把它向右、向上推回自身宽高的一半，等效于让徽标「中心点」对齐右上角顶点 - 前提是徽标有明确宽高，例如
width: 16px; height: 16px;，否则translate偏移不准 - 比写死
top: -6px; right: -6px更鲁棒：字号、padding变化时无需重调 - 加
pointer-events: none让徽标“透明”，点击穿透到底层可交互元素 - 若徽标内部有清空按钮等子元素，再给它单独加
pointer-events: auto - 检查父级是否设了
overflow: hidden（包括overflow-x: scroll隐式触发的 BFC），必要时改用 CSS Grid 替代绝对定位 - 加
z-index: 1确保显示层级，但避免用z-index: 9999这类魔数
top: 0; right: 0; transform: translate(50%, -50%) 是右上角锚定黄金组合
只写 top: 0; right: 0 会让徽标左上角顶到父容器右上角，视觉上明显“浮”在外面；真实需求是徽标右上角内侧贴合目标元素边缘。
防裁剪、防遮挡、防点击失效
绝对定位徽标默认会拦截鼠标/触摸事件，且极易被父级的 overflow: hidden 裁掉——这在卡片列表、滚动容器、圆角头像里特别常见。
立即学习“前端免费学习笔记（深入）”；
真正容易被忽略的不是怎么写定位，而是**谁该承担定位上下文责任**：不是徽标自己，也不是爷爷辈容器，而是它的直接父元素——这个节点一旦缺失，后续所有样式都只是在给错误坐标系打补丁。
