必须给徽章的直接父元素加 relative，否则 absolute 会向上查找最近非 static 定位祖先，若无则定位到 body，导致徽章飘至视口右上角；需配合 translate-x-1/2 -translate-y-1/2 居中对齐，并注意 overflow、transform 等创建新包含块引发裁剪问题。
必须给徽章的直接父元素加 relative，否则 absolute 会跳到 body 或其他祖先上定位，角标必然错位。
为什么 absolute 徽章总飘到页面右上角？
根本不是 top-0 right-0 写错了，而是父容器没设 relative ——absolute 元素会逐级向上找最近的非 static 定位祖先。如果按钮、头像、卡片容器都没加 relative，它就落到 body 上，结果就是徽章死死贴着视口右上角，和目标元素毫无关系。
特别注意：relative 必须加在徽章的**直接父元素**上，比如：
<button class="relative">消息<span class="absolute top-0 right-0">3</span></button><div class="relative"> <img src="..."><span class="absolute top-0 right-0">NEW</span> </div>- 别给
<img>自身加relative，它是 inline 元素，高度不可靠，定位基准会偏移
top-0 right-0 为什么还遮文字？
只写 top-0 right-0 是把徽章的左上角钉在父容器右上角内侧，但徽章自身有宽度，数字稍宽（比如 "99+"）就会向右溢出，盖住文字末尾或图标。
正确做法是补上 translate-x-1/2 -translate-y-1/2（即 transform: translate(50%, -50%)），让徽章中心点对齐那个顶点：
<span class="absolute top-0 right-0 translate-x-1/2 -translate-y-1/2 bg-red-500 text-white text-xs px-1.5 py-0.5 rounded">99+</span>
- 这个组合不依赖固定像素值，字号、padding 变化时无需重调
- 比负
margin更稳，transform不触发重排 - 前提是徽章要有明确尺寸（如
px-1.5 py-0.5）或显式min-w-[1rem]，否则translate计算可能失准
水平滚动容器里徽章被裁剪怎么办？
当父级是 overflow-x-scroll 的卡片列表时，absolute 徽章会被隐式 overflow: hidden 裁掉——因为 overflow 非 visible 会创建新的包含块（containing block），徽章再怎么 absolute 也出不去这个边界。
此时不要硬改 overflow 或加 padding-top 推高，推荐两个务实方案：
- 用
inset-0+grid替代：把卡片设为grid grid-cols-[1fr_auto]，徽章放第二列，自然脱离裁剪范围 - 若必须用
absolute，把徽章提到滚动容器外层包裹节点中，并用data-badge+ 伪元素生成内容，避免 DOM 层级干扰 - 检查父级是否意外带
transform、opacity或will-change，这些也会创建 BFC 导致裁剪
最常被忽略的一点：移动端小屏下，right-0 + translate-x-1/2 可能导致徽章右边缘超出视口。真要严控边界，优先用 inset-inline-end-0 配合 max-width: 80vw 限制徽章本身宽度，而不是调偏移量。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
