角标必须用 position: absolute 配合已定位父容器（如 position: relative）实现精准定位，否则会脱离文档流导致错位；需注意 overflow: hidden 截断、z-index 层级及 top/right 值的响应式适配。
角标为什么不能直接用 margin 或 transform 拉偏移
用 margin-left 或 transform: translate(-50%, -50%) 看似能“拉”到右上角，但实际会破坏布局流、脱离语义容器，导致响应式错位、父容器高度塌陷、或被其他绝对定位元素遮挡。真正可控的方式是让角标成为其业务容器的子元素，并用 position: relative 锚定上下文。
必须给父容器加 position: relative 吗
是的，而且这是关键一步。position: absolute 的定位基准是「最近的已定位祖先」（即 position 值为 relative、absolute、fixed 或 sticky 的父级）。如果跳过这步，角标会相对于 body 或某个意外的祖先定位，一换页面结构就偏移。
常见错误写法：
.badge {
position: absolute;
top: 0;
right: 0;
}——但没给父容器设 position: relative，结果角标飞到整个视口右上角。
立即学习“前端免费学习笔记（深入）”；
正确做法：
.avatar-container {
position: relative;
}
.badge {
position: absolute;
top: -4px;
right: -4px;
}top/right 值怎么选：像素值 vs em/vw
固定尺寸图标（如头像、按钮）用像素最稳妥；响应式容器建议用 em 或 calc() 配合字体缩放。避免用 %，因为 right: 10% 是相对于父容器宽度的 10%，不是相对于自身尺寸。
-
top: -2px; right: -2px;：适合 16px 小角标 + 32px 头像，微调贴边不溢出 -
top: 0; right: 0; transform: translate(50%, -50%);：把角标中心对齐右上角点，适合圆形徽标 -
top: calc(50% - 8px); right: calc(50% - 8px);：配合width: 16px; height: 16px;实现居中锚点
z-index 和 overflow 配合容易被忽略
角标常被父容器的 overflow: hidden 切掉，尤其在圆角头像或卡片中。解决方法有两个：
- 父容器加
overflow: visible（推荐，语义清晰） - 或把角标 DOM 提前到父容器末尾，再用
z-index抬高（不推荐，破坏 DOM 顺序）
同时确保 z-index 有作用：父容器需有定位（relative 已满足），且角标 z-index 大于同级其他绝对定位元素。简单场景下 z-index: 1 足够，复杂 UI 可设 z-index: 10 避免冲突。
角标看着小，但一旦嵌进导航栏、表格单元格或 flex 子项里，position: relative 是否存在、overflow 是否隐藏、transform 是否叠加了其他偏移——这三个点几乎包揽了 90% 的错位问题。
