最稳妥的角标定位方式是父容器设position: relative、角标设position: absolute并用top/right偏移；空状态用:not(:empty)控制显示；尺寸用em等相对单位；点击时设pointer-events: none确保穿透。
角标位置怎么固定在按钮右上角
直接用 position: absolute 是最稳妥的方式，但必须确保父容器（比如按钮本身）有 position: relative，否则角标会相对于整个页面定位。常见错误是忘了给按钮加 position: relative，导致角标飘到页面左上角或错位。
- 按钮元素需显式设置
position: relative - 角标
span设为position: absolute，再用top: -6px和right: -6px往外偏移 - 偏移量建议用
px而非em，避免字体缩放时错位 - 如果按钮高度动态变化（比如响应式），优先用
transform: translate(50%, -50%)配合top: 0; right: 0居中锚点
角标数字怎么自动隐藏或显示空状态
纯 CSS 实现「有数字才显示角标」更轻量，避免 JS 频繁操作 DOM。关键是利用 :empty 伪类 + display: none，而不是靠 JS 控制 class 切换。
- 给角标
span设置默认display: none - 用
.badge:not(:empty)规则匹配非空时显示：display: inline-flex - 不要用
visibility: hidden，它仍占布局空间，会导致按钮 padding 异常 - 若需支持 0 值隐藏（比如“0条未读”不显示角标），得靠 JS 清空
textContent或加 class 控制，CSS 无法判断数值内容
如何让角标适配不同尺寸按钮
角标大小、圆角、字体不能写死像素值，否则在小按钮上溢出、大按钮上显得太小。推荐用相对单位 + min-width 保底。
- 宽度/高度用
min(16px, 1.2em)或直接1.2em，随按钮 font-size 缩放 - 圆角设为
50%保证始终是圆形，而非固定4px - 字体大小用
0.75em，行高设为1避免上下留白干扰居中 - 边框和背景色建议用
currentColor，方便主题切换时自动继承文字颜色
点击区域和可访问性容易被忽略的细节
角标本身不该响应点击，但很多人把它放在按钮内部又没处理 pointer-events，结果点角标触发了按钮逻辑，还可能误触。
- 给角标加
pointer-events: none，确保点击穿透到按钮 - 若角标含关闭叉号（×），那个叉号需单独包裹并设
pointer-events: auto - 用
aria-label补充语义，例如按钮是“消息”，角标应补充“3条新消息” - 避免仅用颜色区分状态，红底白字角标对色觉障碍用户不友好，可加图标或文字前缀
getComputedStyle 里 position 值，比反复调 margin 有效得多。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
