徽章必须用 position: relative + absolute 定位，父容器需显式设 position: relative 作为锚点，徽章须为直接子节点、固定宽高、禁用 margin 和伪元素，确保可访问性与兼容性。
导航栏里徽章必须用 position: relative + absolute 套出
直接把 badge 元素塞进 <li> 或 <a></a> 里，不加定位上下文，它就会相对于 body 偏移——尤其在嵌套布局或 CMS 输出时，位置完全不可控。父容器（比如导航项的 <li>）必须显式设 position: relative，否则 top/right 就没锚点。
常见错误现象：badge 跑到屏幕右上角、多个徽章堆叠在同一个位置、响应式切换后消失。
- 徽章元素（如
<span class="badge">3</span>）必须是父容器的**直接子节点**，中间不能隔一层<div> <li>加 <code>z-index: 1，防被相邻图标或下拉菜单遮挡 - 若导航项有 padding（比如
padding: 8px 16px），仅靠top: 0; right: 0会让徽章卡在右上角外侧，得补transform: translate(50%, -50%) - 禁用
margin模拟偏移——按钮尺寸一变，偏移就错位 - 给徽章设固定宽高，例如
width: 18px; height: 18px;，配合border-radius: 50% - 数字内容用
text-align: center; line-height: 18px;垂直居中，别依赖flex - 若需支持 “99+”，推荐 JS 控制显示逻辑：
Math.min(count, 99) + (count > 99 ? '+' : '')，再注入 DOM；纯 CSS 的::before+attr(data-badge)无法动态截断 - 避免
font-size: 0.625rem这类相对单位——父级font-size一调，徽章就缩放失衡 - 优先检查父容器是否含
overflow: hidden、clip-path或mask - 若不能改父容器，把徽章提到更高层级（比如挂到
<nav></nav>下，用 data 属性绑定目标项 ID） - 禁用
clip-path: polygon()做角标——Safari 旧版不支持，缩放失真，且和border-radius冲突 - 移动端高 DPI 屏幕下，用
px单位比em更稳；若按钮高度不固定，才考虑rem - 必须用
aria-label明确语义，例如aria-label="3 条未读消息"，而非仅"3" - 禁止给徽章加
tabindex="0"——它不是交互控件，不该进焦点流 - 若徽章是动态插入的（比如 AJAX 加载后 JS 注入），确保
aria-label同步更新，别留空或残留旧值 - 别用伪元素
::after生成数字文本——它不进 DOM，读屏器读不到，爬虫也抓不到
数字徽章宽度要固定，避免“1”和“99”跳动
纯靠 content 或内联文本撑开宽度，会导致每次数字变化时整个导航栏轻微抖动，尤其在购物车、消息数等高频更新场景下特别明显。这不是视觉误差，是真实 layout shift。
使用场景：顶部导航栏右上角购物车图标旁、用户头像右上角未读通知、后台菜单项旁状态计数。
立即学习“前端免费学习笔记（深入）”；
父容器 overflow: hidden 会裁掉徽章，得提前处理
圆角头像、带 border-radius 的导航项、卡片式菜单项——只要父容器设了 overflow: hidden，position: absolute 的徽章就会被硬裁，尤其在右上角时只露出一半甚至完全消失。
性能 / 兼容性影响：改 overflow: visible 最快，但可能破坏原有圆角或阴影效果；用 transform: translate() 替代 top/right 是更稳妥的绕过方案，且不触发重排。
可访问性不是加分项，是必选项
红点或数字本身只靠颜色传达信息，对色觉障碍用户等于没提示；屏幕阅读器若读不到“3 条未读消息”，就等于功能缺失。
容易踩的坑：只加 aria-label="3"，却不说明语义；或把徽章塞进 <a></a> 里却没同步更新链接描述。
overflow: hidden、导航项的 padding、按钮的 line-height、甚至 font-feature-settings 开关都可能让数字上下偏移一像素。动手前先 inspect 父链，比反复调 top 值更省时间。
