父容器必须设position: relative，否则角标会相对于body定位而“飞走”；角标用absolute+top/right定位，并配合transform: translate(50%, -50%)精准居中右上角，同时需设置z-index和min-width防遮挡、塌缩。
父容器必须加 relative，否则角标会“飞走”
绝对定位的角标元素（比如红点、数字标签）一旦没被正确约束，就会相对于 body 或最近的非 static 祖先定位——结果就是角标飘在页面右上角，跟头像完全无关。根本原因：Tailwind 的 absolute 类不会自动找父级，它只认已定位的祖先。
必须手动给头像的直接包裹容器加上 relative，且不能省略：
– 不要依赖 flex 或 grid 容器自动提供定位上下文（它不会）
– 避免用 inline 元素做父容器（如 span），推荐 div 或带 block/inline-block 的容器
– 若头像本身是 img，请确保它被一个独立 div 包裹，而不是直接塞进 flex 项目里
右上角角标用 absolute top-0 right-0 + translate 微调
单纯写 top-0 right-0 是把角标左上角钉在容器右上顶点，视觉上会偏左偏上，看起来“没贴住”。实际要用 translate(50%, -50%) 把角标中心对齐那个顶点：
– Tailwind 写法：translate-x-1/2 -translate-y-1/2
– 必须配合 top-0 right-0 才生效
– 如果想让角标完全在容器内（不超出边框），就不用 translate，改用 top-1 right-1 留出间距
– 左上、左下、右下同理，只换方向类名，例如左下：absolute bottom-0 left-0 translate-x-1/2 translate-y-1/2
角标内容塌缩、被遮挡？检查 z-index 和尺寸控制
常见现象：角标文字看不见、红点变椭圆、数字被头像裁掉。这不是定位错了，而是渲染层或盒模型问题：
– 一定要加 z-10 或更高值（如 z-20），否则头像图片或其父 overflow-hidden 会盖住角标
– 用 min-w-[1.25rem] 或 w-5 h-5 固定宽高，避免单个字符（如 “9”）导致宽度塌缩
– rounded-full 搭配 text-xs 和 font-medium 提升可读性
– 若角标含图标（如 svg），需额外加 pointer-events-none，防止遮挡头像点击区域
React 中动态角标容易漏掉 relative 或条件 class
在组件中根据 hasUnread 渲染角标时，很容易只写角标元素，却忘了父容器始终需要 relative：
– 错误写法：只在有角标时加 relative，导致无角标时布局跳动
– 正确做法：父容器固定带 relative，角标元素用 {hasUnread && } 控制显隐
– 若角标需动画（如脉冲红点），避免对 absolute 元素直接用 scale，应配合 transform-gpu 防锯齿，即加 will-change-transform 或 translate-z-0
真正卡住人的不是怎么写，而是忘记 relative 必须始终存在、z-index 必须足够高、以及 translate 和 top/right 是绑定使用的——三者缺一，角标就不可靠。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
