标题被遮挡是因误用.card-img-overlay导致绝对定位叠加，应删除该类并改用标准结构：img.card-img-top + div.card-body。
图片加载后标题被遮挡怎么办
Bootstrap 5 的 .card 默认不控制图片高度，如果图片宽高比异常或未设置 object-fit，容易导致 .card-img-top 拉伸/压缩，进而让后续的 .card-body 中的标题位置错乱、视觉上“重叠”。根本不是 CSS 层级问题，而是盒模型塌陷或尺寸失控。
实操建议：
- 给
.card-img-top显式设置height或max-height，并搭配object-fit: cover（避免变形） - 确保父容器
.card没有意外的overflow: hidden或position: relative导致子元素定位异常 - 检查是否误用了
.card-img-overlay—— 它会让标题绝对定位在图片上，这是设计行为，不是 bug
标题文字压在图片上怎么撤掉
如果你看到标题直接浮在图片上方（比如白色文字叠在白底图上），大概率是用了 .card-img-overlay。这个类本意就是把 .card-title 等内容层叠在图片上，它会给子元素加 position: absolute，并默认设 top: 0。
解决方法很简单：
- 删掉
.card-img-overlay类，改用标准结构：<img class="card-img-top"><div class="card-body"><h5 class="card-title">...</h5></div> - 如果必须保留叠加效果但想调位置，不要改
top，而是用inset或margin微调，避免破坏响应式布局 - 注意：Bootstrap 5.3+ 中
.card-img-overlay的z-index是1，若自定义样式里写了z-index: 0会失效
响应式下标题和图片错位怎么修
常见于小屏设备：图片宽度缩了，但 .card-title 字体没缩，行高撑开，底部文字“顶”进图片区域。这不是重叠，是垂直间距不足。
关键点在于 .card-body 的内边距和 .card-title 的 margin-bottom：
- Bootstrap 默认
.card-body有padding: 1rem，小屏时可加媒体查询微调：@media (max-width: 576px) { .card-body { padding: .75rem; } } - 避免给
.card-title设固定line-height，优先用em或无单位值（如line-height: 1.2）保持缩放一致性 - 如果用了
text-nowrap，务必配合overflow: hidden和text-overflow: ellipsis，否则长标题会挤出卡片边界
自定义卡片时 flex 布局导致标题偏移
很多人用 display: flex 改 .card 内部排列，结果 .card-img-top 和 .card-body 不再是文档流顺序排列，margin 失效，标题“飘”到图片右侧或下方。
正确做法是别动 .card 的 display，而用 Bootstrap 自带的工具类：
- 需要横向卡片？用
.card-horizontal（需 Bootstrap 5.3+）或.d-flex+.flex-row包裹内部元素，但要保留.card-img-top和.card-body的语义结构 - 如果硬要用 flex，请给
.card-img-top加flex-shrink: 0防止被压缩，同时为.card-body设flex: 1 - 绝对不要给
.card设align-items: flex-start—— 这会让.card-body的顶部对齐图片顶部，造成视觉重叠假象
真正麻烦的从来不是写几行 CSS，而是分不清是图片没约束、结构用错类、还是响应式断点没适配。先看浏览器开发者工具里那个“重叠”的元素到底是谁的盒模型溢出了，再动手。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
