position: absolute 是角标首选定位方式，因其能脱离文档流、以最近非static祖先为参考精确定位角落，且不干扰其他元素；但须确保父容器设position: relative，否则定位将失控至body。
为什么 position: absolute 是角标首选定位方式
因为角标必须脱离文档流、紧贴父容器某个角落，又不能影响其他元素布局。position: absolute 能让它以最近的 position: relative（或 absolute/fixed）祖先为参考系精确定位，而 float 或 flex 都会牵扯布局逻辑，反而难控位置。
常见错误是直接给角标设 position: absolute 却忘了给父元素加 position: relative——结果它会一路往上找直到 body，导致偏移完全失控。
- 父容器必须显式设置
position: relative（哪怕只是占位） - 角标自身用
top/right（右上角）、top/left（左上角）等组合定位 - 避免用
margin模拟偏移，它在不同尺寸下不稳定
用 border-radius 控制角标形状的关键取值
数字角标通常是圆形或圆角矩形，border-radius 决定它的“饱满度”。不是所有值都合理：
- 圆形角标：宽高相等时，
border-radius: 50%最可靠；用999px等大数值虽能凑效，但响应式缩放时可能露馅 - 微圆角矩形（如微信消息数）：设
border-radius: 4px或6px，比百分比更易对齐文字基线 - 千万别写
border-radius: 100%——它在某些旧版 Safari 下渲染异常
注意：如果角标内容是纯数字，建议同时设 line-height 等于高度，让数字垂直居中，否则 border-radius 再圆也压不住文字偏移。
如何避免角标被父容器裁切（overflow: hidden 陷阱）
很多导航栏、头像、图标组件默认设了 overflow: hidden，角标一旦超出父盒范围就会被砍掉——尤其是右上角 + 边框/阴影时特别明显。
- 检查父元素是否含
overflow: hidden或overflow: clip，临时改成visible测试 - 更稳妥的做法：把角标 DOM 提升到父容器外层，用 CSS 选择器或 JS 动态挂载到 body 下，再用
transform: translate()定位 - 若必须留在内部，可尝试给父容器加
padding预留空间，但会破坏原有尺寸，慎用
这个坑在移动端适配时高频出现，尤其使用 rem 或 vw 设置角标尺寸时，缩放后裁切边界容易错位。
响应式角标尺寸与字体大小联动技巧
固定写死 width: 18px 在小屏上会撑破按钮，在大屏上又显得太小。更靠谱的是用相对单位+媒体查询兜底：
- 基础尺寸用
em：比如父元素font-size: 14px，角标设width: 1.2em; height: 1.2em;，随上下文缩放 - 数字字体用
font-size: 0.75em，避免小屏下文字溢出 - 必要时加
@media (max-width: 480px)降级为width: 16px等绝对值，防止过小不可读
别忽略 box-sizing: border-box——加了边框或阴影后，不设它会导致实际尺寸超出预期，border-radius 的视觉效果也会失真。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
