红点必须用 position: absolute 定位且父容器设 position: relative，通过 top: 0; right: 0; 和 transform: translate(50%, -50%) 锚定中心，避免硬写负值偏移导致错位；尺寸应响应式适配按钮高度，优先用 em/rem 或固定像素配合 min-width；“99+”需 js 动态控制；深色模式与可访问性须兼顾颜色变量、aria-label 和 z-index。
红点必须用 position: absolute 定位，且父容器一定要设 position: relative，否则红点会脱离目标按钮飞到页面右上角；不同尺寸按钮下，硬写 top: -5px; right: -5px 必然错位，得靠 transform: translate(50%, -50%) 锚定自身中心点。
为什么不能用 margin 或负 top/right 偏移红点
直接写 top: -4px; right: -4px 看似简单，但这些像素值是“死”的：按钮 padding 变了、字体缩放开了、设备 DPR 不同、甚至父元素有 transform，都会让红点偏移失控。小屏下还容易被 overflow: hidden 裁掉一半。
- 真正稳定的方式是：红点用
position: absolute+top: 0; right: 0;先贴到父容器右上角起点，再用transform: translate(50%, -50%)把它自身的中心点对准那个起点 - 如果按钮有内边距（比如
padding: 8px 12px），可先微调起点：right: 4px; top: 4px;，再加transform - 别依赖
margin模拟偏移——它受行高、字体大小影响大，响应式场景下基本不可控
如何让红点适配小号、大号、图标按钮
红点尺寸不能固定写 8px 或 16px，而应和按钮高度形成比例关系。否则小按钮上红点显得臃肿，大按钮上又细得看不见。
- 推荐用
em或rem：红点width和height设为1em，font-size设为0.625rem（即 10px），这样它会随按钮font-size缩放 - 图标按钮（如
<i class="bi bi-bell"></i>）通常无文字，高度由 line-height 或 padding 决定，此时红点min-width和height建议设为16px，border-radius: 50%，避免 Safari 下圆角失效 - 数字徽章要加
min-width: 16px，不然 “9” 正常、“10” 就被截断；同时配overflow: hidden; text-overflow: ellipsis; white-space: nowrap
纯 CSS 实现“99+”数字徽章的坑
CSS 伪元素可以显示固定内容（如 ::after { content: "99+"; }），但无法根据真实未读数动态切换。一旦后端返回 105 条未读，纯 CSS 拿不到这个数值，也就没法决定该显示 “105” 还是 “99+”。
- 最稳妥的做法是用 JS 控制：拿到原始数字
count后，计算显示值Math.min(count, 99) + (count > 99 ? '+' : '')，再注入到徽章元素的textContent或data-badge属性 - 若坚持纯 CSS，可用
[data-badge="0"] { display: none; }隐藏零值，但“99+”逻辑仍需 JS 触发属性变更 - 别用
font-size: 0.625rem这类相对单位做徽章字体——父级font-size一变，徽章就失比例；改用10px或0.625em（相对于自身）更稳
深色模式与可访问性必须处理的细节
红点颜色不能只靠红色，否则色弱用户或深色模式下可能完全看不见；而且仅靠颜色传达“有新消息”违反 WCAG 标准。
- 用 CSS 变量定义红点背景：
--badge-bg: #ef4444;，深色模式下覆盖为--badge-bg: #f87171;，比直接写#ff0000更可控 - 必须加
aria-label，例如aria-label="您有3条未读消息"；如果徽章是纯装饰（如无数字的红点），至少设aria-hidden="true" - 焦点状态（
:focus-visible）下，确保红点不遮挡按钮的outline，必要时给徽章加z-index: 1，按钮主体加z-index: 2
最易被忽略的是父容器的 overflow 和 z-index：一个没设 position: relative，一个写了 overflow: hidden，红点就直接消失——不是代码错了，是渲染规则把它吞了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
