必须用 + css定位实现数字角标，因会导致语义错误、缩放错乱和定位失真；父容器设position: relative，角标用position: absolute配合top/right微调，并处理z-index、overflow、响应式单位及可访问性。
用 <span></span> 实现角标，别用 <sup></sup>
数字角标（比如消息未读数）本质是视觉叠加，不是上标语义。用 <sup></sup> 会导致字体缩放、行高错乱、响应式失真，且无法精准定位。必须用 <span></span> + CSS 定位。
- 角标容器要设
position: relative（通常是图标父元素） - 角标本身加
position: absolute，用top和right微调位置 - 务必设置
font-size、line-height和min-width，避免单数字和两位数宽度不一致 - 示例结构：
<div class="icon-wrapper"> @@##@@ <span class="badge">5</span> </div>
z-index 和 overflow 冲突导致角标被裁切
如果角标显示不全或直接消失，大概率是父容器设置了 overflow: hidden（常见于导航栏、按钮组件），而角标又没脱离文档流。此时 z-index 无效，因为裁切发生在层叠上下文内部。
- 检查角标父级是否含
overflow: hidden或overflow: auto - 解决方案：把角标提到更高层级的容器里，或者给父容器加
overflow: visible（需确认不影响其他布局） - 更稳妥的做法：在图标外层再包一层
<div>，专门设为 <code>position: relative且无overflow限制响应式下角标位置偏移怎么办
固定
top: -5px; right: -5px在小屏上容易跑出图标范围，尤其图标尺寸随屏幕缩放时。不能只靠像素值硬调。- 改用
em或rem单位，例如top: -0.3em; right: -0.3em，使其跟随字体或根字号缩放 - 配合
transform: translate(50%, -50%)把角标锚点设在右上角中心，比纯right/top更稳 - 必要时用媒体查询微调：
@media (max-width: 480px) { .badge { font-size: 0.75rem; padding: 0 0.25rem; } }
可访问性与动态更新注意事项
角标只是视觉提示，屏幕阅读器默认读不到。如果数字有语义（如“3条新消息”），必须显式暴露。
- 给角标加
aria-hidden="true"（若仅作装饰），或加aria-label（如aria-label="3条新消息"） - JavaScript 更新数字时，不要只改
textContent，同时更新aria-label值 - 数字为 0 时，建议隐藏角标（
display: none），而不是显示 “0”——既减少干扰，也避免 aria 误报 - 避免用
visibility: hidden隐藏，它仍会被读屏软件捕获
- 改用
