必须给li加position: relative，否则徽标会相对于body定位而失控；正确做法是li设relative，span.badge设absolute并配合top: 0; right: 0; transform: translate(50%, -50%)实现右上角精准居中。
相对定位（position: relative）本身不会让元素脱离文档流，也不能直接“悬浮”徽标——真正起作用的是在列表项（li）上设 position: relative，再把徽标（比如 span.badge）用 position: absolute 定位到其右上角。这是最可控、兼容性最好的做法。
为什么必须给 li 加 position: relative？
因为 position: absolute 的子元素会相对于**最近的已定位祖先元素**（即 position 值为 relative、absolute、fixed 或 sticky 的父级）进行偏移。如果只给徽标设 absolute，而 li 是默认的 static，那它就会往上找，可能跑到 ul 甚至 body 上去，位置完全失控。
所以关键一步是：
- 确保每个
li都有position: relative - 徽标元素（如
span.badge）作为li的直接子元素或后代插入 - 对徽标设置
position: absolute+top/right偏移
top 和 right 的取值怎么选才不压字、不溢出？
徽标紧贴文字右上角时，常用 top: -0.5em 和 right: -0.5em，但这个值高度依赖字体大小、行高和徽标自身尺寸。更稳妥的做法是：
立即学习“前端免费学习笔记（深入）”；
- 用
top: 0+right: 0先锚定右上角基准点 - 通过
transform: translate(50%, -50%)把徽标中心对齐到该点（适合圆形徽标） - 或用
top: 0.1em+right: 0.2em微调，配合font-size: 0.7em控制大小 - 务必加
white-space: nowrap和overflow: hidden防止徽标文字换行或撑宽
IE 和旧版 Safari 下 transform 偏移失效怎么办？
IE10+ 和 Safari 9+ 支持 transform，但如果你需要兼容 IE9 及更早版本，就得放弃 translate()，改用负 margin 模拟居中：
.badge {
position: absolute;
top: 0;
right: 0;
width: 1.2em;
height: 1.2em;
font-size: 0.65em;
line-height: 1.2em;
text-align: center;
margin-top: -0.6em; /* = -height/2 */
margin-right: -0.6em; /* = -width/2 */
}注意：这里 line-height 必须等于 height 才能垂直居中，且 margin 值需严格匹配徽标尺寸，否则在不同缩放比例下容易错位。
真正难的不是写这三行 CSS，而是当列表项有图标、多行文本、或响应式缩放时，徽标是否还能稳定停在视觉右上角——这时候得靠 padding 预留空间，或用 inset（现代方案）替代 top/right，但后者目前兼容性还不够好。
