徽章角标错位90%因父容器漏设relative；须在直接父元素加relative，再用absolute+top-0+right-0+-translate-x-1/2+-translate-y-1/2实现右上角内侧精准贴合。
徽章角标错位，90% 是因为父容器漏了 relative；只要确保它在徽标的直接父元素上，再配好 absolute + top-0 + right-0 + -translate-x-1/2 + -translate-y-1/2，就能稳住右上角内侧贴合。
父容器必须加 relative，且只能加在直接父元素上
绝对定位的徽标（absolute）会逐级往上找最近的非 static 祖先。如果没找到，就锚定到 body，直接飘到视口右上角。
-
<img>、<i>、<button>这类元素不能直接加relative—— 它们是 inline 元素，高度不可靠；得在外层套一层<div class="avatar-wrapper">或直接给<button>加 - 别指望
flex或grid容器自动提供定位上下文，它们默认是static - React/Vue 中动态渲染徽标时，
relative必须始终存在，不能只在hasUnread为真时才加，否则无角标时布局会跳动
top-0 right-0 只是起点，-translate-x-1/2 -translate-y-1/2 才是精准贴合的关键
只写 top-0 right-0 是把徽标左上角钉在父容器右上角顶点，视觉上明显“浮”在外面，尤其头像带边框或阴影时更突兀。
-
-translate-x-1/2 -translate-y-1/2把徽标向右、向上各推自身宽高的一半，等效于让它的中心点对齐顶点 → 右上角自然贴合父容器内侧边缘 - 这个组合不依赖像素值，改
font-size或padding不用重调数值 - 若想让徽标完全在父容器内（比如避开圆角头像的裁切），可改用
top-1 right-1留出间距，放弃translate
徽标“看不见”或“点不到”，大概率是 overflow、z-index 或 pointer-events 没配对
定位没错，但渲染异常往往出在层叠和交互层。
立即学习“前端免费学习笔记（深入）”；
- 父容器有
overflow-hidden（很多卡片组件默认加）→ 徽标超出部分被直接裁掉；要么删掉该声明，要么给徽标加translate-z-0强制创建新层叠上下文 -
z-index至少设z-10，现代 UI 中z-1基本无效；但别设z-9999，避免和弹窗、Tooltip 冲突 - 徽标挡住底下的点击区域？加
pointer-events-none；若徽标内部有关闭按钮等可点击子元素，再单独给它加pointer-events-auto
响应式缩放下，徽标尺寸必须可控，别只靠 font-size
纯 CSS 很难让徽标随头像等比缩放，但固定尺寸 + translate 已足够稳；真要动态适配，得权衡是否值得引入 JS。
- 红点类徽标：必须显式设
w-4 h-4 rounded-full（即width: 16px; height: 16px;），否则translate-x-1/2的基准会漂移 - 数字类徽标：用
min-w-[1.25rem] h-[1.25rem] leading-[1.25rem]比只设text-xs更可靠 - 若需严格响应式缩放，优先考虑
clamp(0.625rem, 4vw, 0.875rem)控制字号和 padding，而非监听resize事件
最易被忽略的是：徽标必须是直接子节点，且父容器的 relative 不能被 transform、opacity 或 overflow-x: scroll 等属性意外破坏层叠上下文——一旦父容器创建了新上下文，徽标的 z-index 就只在那个小范围内生效。
