因为角标需脱离文档流、精准锚定父元素右上角且兼容性好，故最常用position: absolute；父容器必须设position: relative以提供定位上下文，否则absolute会错位到body边缘；配合transform: translate(50%, -50%)可实现真正居中，避免像素偏移与截断问题。
为什么 position: absolute 是角标最常用方案
因为角标本质是「依附于某个元素右上角的独立小块」，不需要参与文档流，也不该影响父容器布局。用 position: absolute 配合 position: relative 父容器，能精准锚定位置，且兼容性好（IE8+ 都支持）。
- 父容器必须设
position: relative（或absolute/fixed），否则absolute会向上逐级找定位上下文，可能错位到 body 边缘 - 角标默认尺寸小，建议显式设
width和height，避免内容撑开导致偏移 - 不要用
top: 0; right: 0硬贴边——容易被父容器圆角、padding 或 border 截断，推荐留一点偏移量，比如top: -6px; right: -6px
怎么让角标自动居中并适配不同字号
纯靠 top/right 像素值很难兼顾多尺寸场景。更稳的做法是结合 transform：
.badge {
position: absolute;
top: 0;
right: 0;
transform: translate(50%, -50%);
background: #ff4757;
color: white;
font-size: 12px;
width: 18px;
height: 18px;
line-height: 18px;
text-align: center;
border-radius: 50%;
}-
translate(50%, -50%)把自身中心点对齐到top: 0; right: 0的坐标，实现真正右上角居中 -
line-height等于height才能垂直居中文字，仅靠display: flex在旧版 Safari 里可能失效 - 如果角标数字是动态的（如 "99+"），记得加
white-space: nowrap防止换行撑宽
遇到 z-index 层叠失效怎么办
常见现象：角标被兄弟元素遮挡，或父容器设置了 overflow: hidden 导致截断。
- 优先检查父容器是否意外设置了
z-index且值较低——absolute元素的层叠顺序受其最近的「定位祖先」影响 - 若父容器有
overflow: hidden，角标超出部分会被裁剪；可改用overflow: visible，或把角标提到更高层级的 DOM 节点下（如挂到 body 上，用 JS 动态计算位置） - 不要盲目堆高
z-index: 9999，先确认层叠上下文层级，必要时给父容器也设position: relative; z-index: 1
角标看着简单，但一动真格就会暴露对定位上下文、层叠规则和盒模型的理解缺口——尤其是当它要嵌在按钮、图标、甚至 SVG 里时，每个父容器的定位状态都得亲手确认一遍。
立即学习“前端免费学习笔记（深入）”；
