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 class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill11112" title="CSS工具箱(专业版)"><img src="https://img.php.cn/upload/skill/001/246/273/6adaf20e352aa140.jpg" alt="CSS工具箱(专业版)" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill11112" title="CSS工具箱(专业版)" class="overflowclass">CSS工具箱(专业版)</a> <p class="overflowclass">全功能 CSS 工程手册，覆盖性能优化、无障碍、设计系统与跨浏览器兼容。</p> </div> <a rel="nofollow" href="/xiazai/skill11112" title="CSS工具箱(专业版)" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div></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 更稳妥，能随根字体缩放。
角标看着小，但实际要同时兼顾定位上下文、CSS 层级、悬停触发时机、RTL 兼容和旧浏览器 fallback —— 最容易漏掉的是给卡片加 position: relative 这一步，一漏全偏。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
