position: relative 必须加在父容器上，因为 absolute 子元素的定位基准是最近的已定位祖先元素；若父容器未设 relative，将回溯至 body 定位，导致角标位置失控。
为什么 position: relative 必须加在父容器上
子元素用 position: absolute 时，它的定位基准是「最近的已定位祖先元素」（即 position 值为 relative、absolute、fixed 或 sticky 的父级）。如果父容器没设 position: relative，浏览器会一直往上找，最终可能相对于 <body> 定位，导致角标飘到整个页面右上角，而不是你想要的容器右上角。
常见错误：只给角标加 absolute，忘了给父容器加 relative，结果位置完全失控。
top: 0; right: 0; 是最简右上角定位，但要注意内边距干扰
默认情况下，top: 0; right: 0; 会让角标贴着父容器的右上角边缘。但如果父容器有 padding，角标仍会紧贴内容区右上角（即扣除 padding 后的区域），看起来像“缩进”了。
解决方法取决于需求：
立即学习“前端免费学习笔记（深入）”；
- 想让角标真正顶到容器外框右上角？给父容器设
padding: 0，或改用border-box盒模型（不影响定位逻辑，但更可控） - 想保留 padding 但让角标从 padding 边缘开始偏移？加
transform: translate(50%, -50%)配合top: 0; right: 0;，把角标自身中心对齐到右上角点 - 想让角标刚好在容器右上角内侧、不溢出？直接用
top: 4px; right: 4px;这类微调值，比依赖 transform 更直观稳定
角标内容溢出或被裁切？检查父容器的 overflow
如果父容器设置了 overflow: hidden（比如卡片、按钮、头像组件常这么写），而角标用了 absolute 定位又超出容器边界，就会被直接裁掉——哪怕它视觉上该显示在右上角。
此时不能简单删掉 overflow: hidden（可能破坏原有圆角或布局），推荐两种处理方式：
- 给父容器加
overflow: visible，仅针对需要角标的实例覆盖 - 把角标 DOM 提升到父容器外层，用 JS 动态计算位置，或借助 CSS
contain: layout配合定位上下文隔离（较重，一般小项目不用）
绝大多数情况，第一种方式最快见效。
响应式场景下角标错位？优先用 em 或 rem 控制偏移量
用像素（px）写 top/right 在缩放或字体变化时容易失准。例如用户把系统字体调大，right: 8px 可能显得太靠近边缘。
更健壮的做法：
- 用
right: 0.5em;—— 以当前字号为单位，随文本缩放自然调整 - 用
top: 0.25rem;—— 如果项目已统一用rem基准，一致性更好 - 避免混合单位，比如
top: 2px; right: 0.3em;，容易在不同设备上表现不一致
另外，角标自身的 font-size 也建议用相对单位，否则在高 DPI 屏或缩放页面里可能过小或糊掉。
.badge-container {
position: relative;
}
.badge {
position: absolute;
top: 0.25rem;
right: 0.25rem;
background: #ff4757;
color: white;
font-size: 0.75rem;
padding: 0.125rem 0.375rem;
border-radius: 0.25rem;
}
角标看似简单，真正卡住人的往往不是定位语法，而是父容器是否“参与定位流”、溢出策略是否隐式拦截、以及单位选择是否适配真实使用环境。这三个点漏掉任何一个，都可能让 relative + absolute 组合失效。 
