Bootstrap 卡片（.card）默认不是 position: relative，必须显式添加 position-relative 类或自定义 CSS 设置 position: relative，否则绝对定位角标会相对于视口而非卡片定位。
用 position: absolute 定位角标，但必须确保父容器有定位上下文
Bootstrap 卡片（.card）默认是 position: relative 吗？不是。这是最容易翻车的第一步：如果直接对子元素设 position: absolute 并用 top: 0; right: 0，它会相对于最近的「已定位祖先」找位置；若卡片没设 position: relative，就可能飞到整个页面右上角去。
所以必须显式给卡片加定位：
<div class="card"> <div class="badge badge-danger position-absolute top-0 end-0 mt-2 me-2">NEW</div> <div class="card-body">...</div> </div>
但上面这段代码仍不保险——因为 Bootstrap 5 的 .card 默认没设 position，得手动补上：
- 在卡片上加
position-relative类（Bootstrap 5.3+ 内置） - 或自己写 CSS：
.card { position: relative; } - 避免用
!important覆盖，Bootstrap 的position-absolute工具类依赖父级相对定位
用 Bootstrap 内置工具类组合比手写 top/right 更稳
Bootstrap 5 提供了响应式定位工具类，比硬写像素值更可靠，尤其适配不同尺寸卡片和缩放场景。
立即学习“前端免费学习笔记（深入）”；
推荐组合（适用于大多数情况）：
-
position-absolute：启用绝对定位 -
top-0+end-0：贴右上角（end比right更符合 RTL 支持） -
mt-2和me-2：微调偏移（mt= margin-top,me= margin-end），避免紧贴边框 - 加
z-index: 1（可选）：防止被卡片阴影或内容遮挡
完整示例：
<div class="card position-relative"> <span class="badge bg-danger position-absolute top-0 end-0 mt-2 me-2">HOT</span> <div class="card-body"><p>内容区域</p></div> </div>
悬浮状态（hover）需要额外处理层级和过渡
纯 CSS 角标本身不会“悬浮”，但你可以让它在鼠标悬停卡片时才显示，这需要两步：
- 初始隐藏：用
opacity: 0或visibility: hidden（推荐后者，避免占位干扰） - 悬停触发：用
.card:hover .badge恢复可见性，并加transition让出现更自然 - 注意：不能只对
.badge加:hover，否则一移开鼠标就消失，体验断断续续
最小可行 CSS：
.card .badge {
visibility: hidden;
transition: visibility 0.2s, opacity 0.2s;
}
.card:hover .badge {
visibility: visible;
opacity: 1;
}
如果还想要淡入效果，可配合 opacity: 0 → 1，但需确保 visibility 同步切换，否则过渡无效。
IE11 或旧版 Bootstrap 4 下的兼容写法
Bootstrap 4 没有 position-absolute、top-0 这类工具类，且不支持 end/start 逻辑方向属性。
此时必须手写定位，并注意：
- 用
right: 0替代end-0，top: 0不变 - Bootstrap 4 的
.card也**不带position: relative**，必须手动加 - 避免用
transform: translate()做偏移（IE11 对transform与absolute组合渲染不稳定） - 推荐写法：
<div class="card" style="position: relative;"> <span class="badge badge-danger" style="position: absolute; top: 0.5rem; right: 0.5rem;">NEW</span> <div class="card-body">...</div> </div>
数值用 rem 比 px 更稳妥，能随根字体缩放。
position: relative 这一步，一漏全偏。 
