使用 position: absolute 实现角标需父容器设 position: relative，角标设 absolute 并用 top/right 等偏移定位，配合 transform 居中、z-index 提升层级，避免 overflow 遮挡及 transform 层叠上下文影响。
用 position: absolute 给元素加角标（比如右上角的红点、数字徽章），核心是把角标作为子元素，父容器设为 position: relative，再用 absolute 精确控制位置。
父容器必须设为 relative
角标要相对于父元素定位，所以父容器（比如按钮、头像、卡片）需先声明 position: relative。否则 absolute 会向上找最近的定位祖先，可能跑到 body 上去，位置就偏了。
例如：
.badge-container { position: relative; }角标元素用 absolute + 偏移定位
角标本身设置 position: absolute，然后用 top、right（或 bottom、left）微调位置。常用右上角角标写法：
立即学习“前端免费学习笔记（深入）”；
-
top: -6px;—— 向上顶出一点，让角标“浮”在右上边缘外 -
right: -6px;—— 向右顶出，对齐右边缘 -
width和height设为固定值（如16px），配合border-radius: 50%做圆点 - 加
transform: translate(50%, -50%)可以更精准居中（尤其当角标内容不固定时）
避免遮挡与层级问题
角标默认可能被父容器的 overflow: hidden 切掉，或被其他元素盖住：
- 如果父容器有
overflow: hidden，去掉它，或改用clip-path等更可控方式裁剪 - 给角标加
z-index: 1（或更高），确保它显示在最上层 - 若父容器用了
transform（如scale或translate），它会创建新的层叠上下文，此时角标的z-index需在该上下文中生效，注意层级嵌套
适配内容型角标（如数字、文字）
如果角标里是数字或文字，建议：
- 用
display: flex+justify-content: center; align-items: center;居中内容 - 设
font-size: 10px、line-height: 1控制文字大小和行高 - 加
white-space: nowrap;防止数字被换行 - 内容为空时，可用
content: ""配合伪元素实现无 DOM 的角标，减少冗余标签
