角标错位主因是父容器未设position: relative；应给直接父元素设relative，用top/right+transform居中，伪元素+attr()动态渲染，规避overflow:hidden裁切和z-index失效问题。
父容器没设 position: relative，角标就一定错位
这是 90% 角标失效的根源。position: absolute 的角标不会自动认父容器为锚点——它会逐级往上找第一个 position 不是 static 的祖先。如果卡片、按钮、图标外层没显式加 position: relative，角标大概率飞到 body 右上角，或被某个中间层截停。
实操建议：
- 给承载角标的直接父元素（比如
.card、.btn、.icon-wrapper）加position: relative - 避免依赖
flex或inline-block自动创建定位上下文——它们不会 - 若父容器本身是
absolute或fixed，也满足条件，但语义上不如relative清晰 - 检查 DevTools 中角标元素的「Computed」面板，看
position和offsetParent是否指向预期父节点
top/right + transform 才算真正居中
只写 top: 0; right: 0; 是以角标左上角为基准贴边，数字“9”和“99+”视觉重心不同，容易看起来偏下或偏右；硬调 top: -6px; right: -6px 又难适配多字号、多密度屏幕。
更稳的做法是用 transform: translate(50%, -50%) 把角标自身中心对齐到右上角坐标点：
立即学习“前端免费学习笔记（深入）”；
.badge {
position: absolute;
top: 0;
right: 0;
transform: translate(50%, -50%);
width: 18px;
height: 18px;
line-height: 18px;
font-size: 12px;
text-align: center;
border-radius: 50%;
}
注意：line-height 必须等于 height 才能垂直居中文本；white-space: nowrap 防止 “99+” 换行撑宽。
伪元素 + attr() 实现动态内容，不改 DOM
用 ::after 替代额外的 <span class="badge">，既能减少 HTML 噪声，又能通过 data-badge 属性驱动内容更新，JS 只需改属性值，CSS 自动响应。
关键写法：
- HTML 中在目标元素上加
data-badge="3"（支持空值、数字、字符串） - CSS 里用
content: attr(data-badge)读取值 - 必须确保该元素已设
position: relative，否则伪元素的absolute会失焦 - 若内容为空（
data-badge=""），可配合content: attr(data-badge, " ")避免伪元素意外渲染空格
示例：
.btn[data-badge]::after {
content: attr(data-badge);
position: absolute;
top: -6px;
right: -6px;
background: #ff4757;
color: white;
font-size: 10px;
min-width: 16px;
height: 16px;
line-height: 16px;
text-align: center;
border-radius: 8px;
padding: 0 4px;
}
圆角裁切、overflow: hidden 和层级遮挡是三大隐形杀手
角标明明定位正确，却半截消失、颜色发虚、或被兄弟元素盖住——问题通常不在定位，而在渲染链路：
- 父容器设了
border-radius+overflow: hidden：角标超出部分被裁掉。解法是移除overflow: hidden，或改用clip-path精确适配圆角 -
z-index失效：不是数值不够大，而是父容器没形成层叠上下文。给父容器加position: relative; z-index: 0就能重置上下文 - 角标被同级元素遮挡：检查兄弟元素是否带
z-index且值更高；或角标本身未设z-index（哪怕只是1） - 高 DPR 屏幕下边缘模糊：加
transform: translateZ(0)或will-change: transform触发 GPU 加速
真正麻烦的从来不是怎么把角标放上去，而是它在各种嵌套、动画、滚动、缩放场景下是否始终稳如磐石——每个父级的 position 状态、每个祖先的 overflow 和 z-index，都得亲手确认一遍。
