数字角标需满足四不原则：不遮挡、不跳动、不崩布局、不被裁切；须父容器设position: relative，角标用absolute+transform精确定位，设min-width防跳变，深色模式需媒体查询或data-theme适配。
数字角标不是加个 <sup></sup> 就完事——它必须不遮挡内容、不跳动、不崩布局、不被裁切，否则就是视觉 bug。
父容器没设 position: relative，角标直接飞到页面左上角
这是最常被忽略的定位前提。只要角标用了 position: absolute（比如 top: -6px; right: -6px），而它的父元素没声明 position: relative，浏览器就会逐级往上找最近的定位上下文；找不到就落到 ，结果所有角标都堆在左上角。
- 检查结构：角标元素必须是某个容器的直接子元素，且该容器显式写了
position: relative - 别依赖“祖先有定位”——哪怕 header 有
position: sticky，也不等于它能当角标锚点 - 用浏览器开发者工具选中角标，看 computed 的
position和offsetParent，确认锚点是否正确
min-width 缺失导致 “1” 和 “99+” 宽度跳变
数字长度变化时，如果角标没设最小宽度，整个徽章会左右晃动，尤其在通知计数频繁更新的场景下，用户会明显感到干扰。
- 给角标加
min-width: 1.2em（或具体像素值如18px），确保单数字和双数字宽度一致 - 配合
text-align: center和white-space: nowrap，防止 “99+” 换行或文字溢出 - 若支持超大数字（如
999+），建议统一用overflowCount截断逻辑，前端控制显示为99+而非渲染真实值
transform: translate(50%, -50%) 不加，不同字体/字号下偏移漂移
只靠 top: -6px; right: -6px 定位，在 Chrome/Firefox/Safari 下表现不一，尤其当父容器 font-size 变化、或使用系统字体时，角标会明显偏右或偏高。
- 必须搭配
transform: translate(50%, -50%)，让偏移基于自身宽高中心计算，而非左上角锚点 - 这个组合写法要成对出现：
position: absolute; top: -4px; right: -4px; transform: translate(50%, -50%) - 数值
-4px是经验值，实际应按徽章高度（如16px）取一半微调，避免硬写死
深色模式下角标不可见？别只改背景色
只写 background: #f5222d 在深色背景下会发灰甚至隐形，而且纯 CSS 颜色值无法响应系统偏好，除非你主动监听 prefers-color-scheme。
- 基础样式设浅色模式配色，再用
@media (prefers-color-scheme: dark)覆盖深色模式下的background和color - 避免用
opacity或半透明白色背景，深色模式下对比度依然不足 - 更可控的做法是加
data-theme="dark"属性，用[data-theme="dark"] .badge精确控制，绕过系统检测延迟
真正难的不是写出角标，而是让它在任意父容器、任意字号、任意主题、任意数字长度下都稳住位置和尺寸——这些细节一旦漏掉，用户看到的就是一个飘忽、跳动、被裁掉或干脆看不见的“小红点”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
