徽章位置偏移是因为父容器未设position: relative，导致absolute定位的徽章向上查找锚点至body，脱离导航栏；必须给直接父元素（如.nav-link）添加position-relative才能正确参照。
导航栏里徽章位置偏移，是因为父容器没设 position-relative
徽章（.badge）加了 top-0 end-0 后“飘”到浏览器右上角，不是写法错，而是它找不到定位锚点。CSS 的 position: absolute 会向上查找最近的 position: relative 祖先；如果 .nav-link 没加这个类，它就一路找到 .navbar 甚至 body，结果红点完全脱钩。
必须给徽章的直接父元素加 position-relative——常见错误是只写 <span class="badge bg-danger">3</span>，却漏掉包裹它的 <button class="nav-link position-relative"></button> 或 <a class="nav-link position-relative"></a>。
top-0 end-0 和 translate-middle 到底要不要一起用
取决于你想要“顶角贴边”还是“居角对齐”：
- 只要红点右上角刚好卡在链接内边框（不溢出），只用
top-0 end-0就够 - 想让红点中心点对齐右上角（比如小圆点效果），必须加
translate-middle，否则视觉上会偏左上 - 数字变大（如
99+）时，translate-middle更关键——否则右侧容易撑出父容器
等效 CSS 是 transform: translate(50%, -50%)，它把徽章自身向右下各移一半宽高，抵消 top-0 end-0 默认以左上角为锚点的偏差。
未读数动态更新时，DOM 和语义要同步
只改 .badge 的文本内容远远不够，容易出现数量不同步、隐藏后残留、屏幕阅读器无反馈等问题：
- 更新逻辑必须基于真实状态：要么读取后端返回的
unread_count字段，要么前端遍历所有未读通知项（如document.querySelectorAll('.notification-item:not(.is-read)').length） - 清空全部通知时，不能只删 DOM；要同步移除所有
.is-read类、重置徽章文本、并触发aria-live区域播报“已清除全部通知” - 徽章本身建议加
role="status"或挂到已有aria-live区域，避免用户依赖读屏器时错过变化
移动端小尺寸徽章需要手动调 font-size 和 padding
Bootstrap 默认的 .badge.rounded-pill 在手机上可能显得过大，尤其嵌在窄窄的导航图标旁：
- 用
font-size: 0.625rem（即 10px）控制文字大小 - 配
padding: 0.125rem 0.375rem（即 2px 6px）收紧内边距 - 保留
.bg-danger.rounded-pill，无需额外写border-radius - 注意：别用
small标签或缩放类（如fs-6），它们受父级字体缩放影响，可能导致红点在 iOS Safari 中忽大忽小
最易被忽略的是：徽章必须始终挂在通知入口按钮内部（如铃铛图标的 <button></button> 里），绝不能挂到 .navbar 或 .collapse 容器上——否则下拉展开后，滚动时红点位置会跟着错乱。
