必须为图片父容器显式添加position: relative，否则absolute定位文字会相对于body偏移或消失；小屏用bottom-0+translate-middle-x，大屏用top-50+start-50+translate-middle，并配合rem单位与媒体查询微调。
直接用 .carousel-caption 或随便套 position: absolute 文字，小屏下大概率错位、溢出、字体失衡——真正能落地的方案，必须手动接管定位上下文和响应式行为。
为什么文字总飘到左上角或消失
根本原因是没给图片容器设 position: relative。Bootstrap 的 .card、.carousel-item 默认是 position: static，不构成定位上下文；一旦对文字加 position: absolute，它就会往上找最近的定位祖先（可能是 <body>），结果就是飘走或被裁掉。
- 必须显式加
class="position-relative"到图片的直接父容器（比如<div>或<div class="card">） -
<img>本身要加class="w-100"或style="width: 100%; height: auto;"，否则缩放逻辑失效 - 如果父容器有
overflow: hidden（如.card默认就有），文字超出边界会被直接裁掉，得靠top/bottom/left/right控制范围
如何让标题在小屏底部、大屏居中
Bootstrap 的 top-*、fs-* 类不支持断点前缀（比如没有 top-md-50），不能只靠工具类切换位置，得组合控制显隐 + 独立定位逻辑。
- 小屏底部居中：
class="position-absolute bottom-0 start-0 end-0 translate-middle-x fs-5 d-block d-md-none" - 大屏垂直居中：
class="position-absolute top-50 start-50 translate-middle fs-4 d-none d-md-block" - 避免写死像素值（如
top: 20px），改用rem或百分比，再配合媒体查询微调 - 别用
transform: translate()单独调位置——它不影响布局流，但会干扰移动端点击区域
用 card-img-overlay 还是手写 position-absolute
card-img-overlay 是 Bootstrap 提供的语义化方案，但只适用于 .card 结构，且必须是 .card 的直接子元素；手写方案更灵活，但容易漏掉定位上下文或 z-index。
- 选
card-img-overlay：已有标准卡片结构，想快速实现底图+浮层，且不需要兼容 IE - 选手写
position-absolute：用在轮播、网格、SVG 容器等非卡片场景，或需要精细控制层级（比如加z-index: 10压住图片） - 两者都必须配
object-fit: cover（.card-img或<img>上），否则图片拉伸后文字锚点偏移 - 文字内容若含链接或按钮，务必检查
pointer-events是否被父层遮挡
最易被忽略的是：文字高度不可控时，bottom-0 不等于“贴底”——如果文字两行，它会从第二行底边开始算；真正稳的方案是固定容器高度 + display: -webkit-box 截断，而不是只靠定位类。
