卡片文字叠加后消失或错位，是因为未给父容器设position: relative，导致position: absolute的文字相对于最近定位祖先（如body）偏移；Bootstrap .card默认static，不构成定位上下文，必须显式添加position: relative并配合z-index、响应式单位及媒体查询确保标签正确显示且不被裁切。
为什么卡片文字叠加后消失或错位
直接给文字加 position: absolute 但没给父容器设 position: relative，文字会相对于最近的定位祖先（比如 body）偏移，结果飘到页面角落甚至被裁切。Bootstrap 的 .card 默认是 position: static，不构成定位上下文。
- 必须在卡片容器（如
<div class="card">）上显式添加position: relative - 叠加文字元素需设
position: absolute，并用top/bottom/left/right定位 - 若卡片有
overflow: hidden（默认就有），确保文字不超出卡片边界，否则会被裁掉
如何让文字固定在卡片右上角且不遮挡图片
常见需求是打标签（如“新品”“热销”），要避开卡片顶部图片区域。关键是利用 Bootstrap 的结构分层和 z-index 控制层级。
- 把文字标签放在
<div class="card">内部最顶层（比如紧贴闭合</div>前） - 用
top: .5rem和right: .5rem微调位置，配合.badge类或自定义样式 - 加
z-index: 10确保压在图片和内容之上（Bootstrap 卡片内容默认 z-index 是 auto） - 如果卡片含
<img class="card-img-top">，它本身没有定位，不会干扰绝对定位文字
<div class="card" style="position: relative;"> <img src="..." class="card-img-top"> <div class="card-body">...</div> <span class="badge bg-danger" style="position: absolute; top: .5rem; right: .5rem; z-index: 10;">新品</span> </div>
响应式下文字位置偏移怎么办
绝对定位数值写死（如 top: 20px）在小屏下容易重叠或溢出。Bootstrap 的间距工具类（.m-*, .p-*）对绝对定位元素无效，得靠媒体查询或 CSS 自定义属性。
- 优先使用 rem/em 单位（如
top: .75rem），跟随根字体缩放 - 在
@media (max-width: 576px)中重设top/right值，例如改用top: .25rem避免和标题挤在一起 - 避免用
transform: translate()做微调——它不影响文档流但会干扰点击区域，尤其在移动端
用伪元素替代真实 DOM 节点是否更轻量
可以，但限制明显：伪元素无法绑定事件、不能被屏幕阅读器识别、内容只能是字符串（不能插图标或复杂 HTML）。
立即学习“前端免费学习笔记（深入）”；
- 适合纯装饰性标签，例如用
::after加个角标圆点 - 必须确保父元素有
position: relative，且伪元素设position: absolute - 若需交互（如点击跳转）或 SEO/可访问性要求，必须用真实元素
- 注意伪元素默认无尺寸，要设
content: ""+width/height才能显示
<div class="card" style="position: relative;">
<div class="card-body">...</div>
<div class="card-overlay-label" aria-label="限时折扣">折扣</div>
</div>
<style>
.card-overlay-label::before {
content: "?";
position: absolute;
top: .5rem;
left: .5rem;
font-size: .875rem;
}
</style>
实际项目里最容易忽略的是卡片内嵌套了其他定位元素（比如轮播图 .carousel 或弹出菜单），它们可能意外成为新的定位上下文，导致文字相对位置突变。调试时先检查 Chrome DevTools 的 “Computed” 面板里 position 和 offsetParent 值，比猜更快。 
