父元素必须设position: relative，否则absolute角标会相对于最近已定位祖先定位；应配合transform微调位置、控制white-space和font-size防溢出；角标z-index需高于父容器层叠上下文。
父元素设 position: relative 是必须的
子元素用 position: absolute 定位角标时，浏览器会向上查找最近的「已定位祖先」（即 position 值为 relative、absolute、fixed 或 sticky 的祖先）作为参考系。如果父元素没设 position: relative，角标可能相对于 body 或某个意外的祖先偏移，导致位置漂移。
常见错误：只给角标加 position: absolute，忘了给包裹它的父容器加 position: relative，结果角标飞到页面左上角。
- 父容器必须显式声明
position: relative，哪怕它本身不需要偏移 - 不要依赖
display: inline-block或float来“撑开”定位上下文——它们不构成定位祖先 - 若父容器是
flex或grid容器，仍需额外加position: relative
top/right 配合 transform 微调角标位置
仅靠 top: 0; right: 0 往往会让角标贴着父容器右上角边缘，视觉上太挤。更稳妥的做法是配合 transform 做像素级偏移，避免因字体大小、行高或边框带来的计算误差。
例如右上角红点角标：
立即学习“前端免费学习笔记（深入）”；
.badge {
position: absolute;
top: -6px;
right: -6px;
width: 16px;
height: 16px;
background: #ff4757;
border-radius: 50%;
font-size: 10px;
line-height: 16px;
text-align: center;
color: white;
transform: translate(50%, -50%);
}
注意：transform: translate(50%, -50%) 让元素自身中心对齐到 top: -6px; right: -6px 指定的坐标点，比纯靠 margin 或硬调 top/right 更稳定。
角标内容溢出时要控制 white-space 和 font-size
数字角标（如 99+）或文字角标（如 NEW）在窄空间里容易换行或撑破圆角。需主动限制显示行为：
- 用
white-space: nowrap防止意外换行 - 对多位数字用
font-size: smaller或媒体查询降级字号 - 用
overflow: hidden; text-overflow: ellipsis仅适用于单行文本角标（需同时设width和white-space: nowrap） - 避免对
span.badge设置固定width后又让内容居中——若内容宽度 > width，文字会截断或偏移
z-index 不够时角标被兄弟元素遮挡
父容器内若有其他 position: relative 元素（比如按钮、图标），且未设 z-index，渲染顺序可能使角标被盖住。此时不能只给角标加 z-index: 1，而要确保其层叠上下文足够高。
关键点：
- 角标自身设
z-index: 2（比父容器默认的z-index: auto高） - 若父容器已有
z-index（如z-index: 1），角标至少设z-index: 2才能浮起 - 避免在父容器上设
z-index: 0——这会创建新层叠上下文，把角标“锁死”在该上下文中，即使角标z-index再高也出不去
真正复杂的场景是多个嵌套定位组件叠加，这时候得统一规划层叠层级，而不是单点加 z-index。
