Tab容器需设position: relative，角标用absolute定位并配top/right负偏移及transform居中，z-index:1防遮挡；显隐推荐visibility+opacity而非display:none；圆角Tab应避免overflow:hidden以防裁切角标。
Tab容器必须设为 position: relative
角标要绝对定位在Tab右上角，前提是Tab元素本身得是定位上下文。如果父容器没设 position: relative，position: absolute 的角标会往上逐级找最近的定位祖先，很可能跑到整个页面右上角去。
常见错误现象：.tab-item::after 或独立 .badge 元素飘到屏幕右上角、随滚动乱跑、多个Tab共用一个角标位置。
- 每个Tab项（如
<button class="tab-item">）必须显式加position: relative - 不要只给外层
.tabs容器设relative，它不直接包裹角标 - 若Tab用
<a>标签，默认是 inline 元素，需加display: inline-block或block才能正确撑开定位空间
角标用绝对定位 + top/right 微调
右上方不是“靠边就行”，需要精确控制偏移量，否则在不同字号、padding 下容易错位或被裁切。
使用场景：角标常用于未读数、新标识、必填标记等，尺寸小、信息密度高，容错率低。
立即学习“前端免费学习笔记（深入）”；
- 角标元素（如
<span class="badge">3</span>）设position: absolute，再配top: -6px、right: -6px这类负偏移 -
top和right值建议用px，避免em或rem在缩放或字体变化时漂移 - 加
transform: translate(50%, -50%)可让角标真正“钉”在右上角顶点，但需配合top: 0、right: 0使用，否则基准点不对 - 务必设
z-index: 1，防止被Tab文字或边框遮住
角标内容动态显示时注意 visibility 与 display 切换
很多同学用 display: none 控制角标显隐，结果Tab宽度随角标出现/消失跳动——因为 display: none 会彻底退出文档流，影响父容器尺寸计算。
性能影响：频繁切换 display 触发重排（reflow），比 visibility 或 opacity 开销大。
- 推荐用
visibility: hidden+opacity: 0隐藏角标，保持占位；显示时还原即可 - 若角标完全不需要占位（比如纯装饰性红点），可用
display: none，但必须同步手动设置Tab的padding-right补偿宽度 - JavaScript 控制显隐时，别只改
innerText，记得同步更新visibility状态，空字符串 ≠ 隐藏
适配圆角Tab时角标边缘可能被裁切
当Tab本身有 border-radius（比如 border-radius: 8px），而角标又紧贴右上角，它的尖角很容易被父元素的 overflow: hidden 或圆角区域裁掉。
兼容性影响：Safari 对 overflow: hidden + border-radius 组合的裁切行为更激进，Chrome 相对宽松。
- Tab容器避免设
overflow: hidden—— 宁可让角标略微溢出，也别让它被砍掉一半 - 如果必须隐藏溢出，改用
clip-path精确控制裁剪区域，例如clip-path: inset(0 0 0 0 round 8px) - 角标自身加
border-radius: 50%或4px，和Tab圆角视觉匹配，减少突兀感
overflow: hidden 和 border-radius 的组合行为，它不按你写的 CSS 直接执行。 
