必须用position: relative包裹图片容器以建立定位上下文，使内部absolute文字精准锚定在图片内并随响应式缩放同步调整；若直接对父容器设absolute，文字将脱离文档流且小屏易错位溢出。
图片叠加文字时，为什么用 position: relative 而不是 position: absolute 直接套父容器？
因为 bootstrap 的响应式图片（<img class="img-fluid">）默认宽度 100%、高度自适应，若直接对父容器设 position: absolute，文字会脱离文档流，且在小屏下容易错位或溢出。正确做法是让图片容器（如 <div>）设 position: relative，再把文字层用 position: absolute 定位其内——这样文字始终锚定在图片可视区域内，随图片缩放同步调整。
常见错误：把 position: absolute 加在文字元素上，但父容器没设 position: relative，结果文字跑到页面左上角。
- 必须给图片外层包裹一个
<div class="position-relative"> -
<img>本身加class="img-fluid"保证响应式缩放 - 文字层用
class="position-absolute"+top/bottom+left/right控制位置
如何让文字在不同断点下自动切换位置和大小？
Bootstrap 5+ 提供了断点工具类，但 position 和 font-size 不支持原生响应式类，需组合使用。例如文字要“小屏居底、大屏居中”，不能只靠 text-center，得配合断点类控制定位和字体。
典型场景：卡片式图文展示，移动端文字压在图片底部，桌面端居中叠加并加大字号。
- 用
bottom-0 start-0 end-0实现底部居中（小屏） - 用
top-50 start-50 translate-middle实现居中叠加（大屏） - 文字大小用
fs-6 d-md-block d-none和fs-4 d-none d-md-block分开控制 - 避免用
px做绝对偏移，改用translate或top/bottom百分比值
img-fluid 和 object-fit: cover 冲突怎么办？
当图片宽高比与容器不一致时，img-fluid 只保证等比缩放、不裁剪；若想填满容器又保持焦点区域可见，需加 object-fit: cover。但 Bootstrap 默认不设该属性，手动加后可能破坏某些旧版浏览器兼容性（如 IE）。
错误现象：加了 object-fit: cover 后文字层位置偏移，尤其在 Safari 中。
- 必须同时设
height: 100%或明确高度（如min-height: 200px）给父容器 - 文字层的
position: absolute坐标以父容器为参考，不是图片原始尺寸 - IE 不支持
object-fit，可加@supports (object-fit: cover)包裹样式做渐进增强 - 推荐写法：
<div class="position-relative" style="min-height: 200px;">
文字遮罩（overlay）透明度和背景色怎么选才不挡图？
纯文字叠加常因对比度不足看不清，加半透明背景（如 bg-dark bg-opacity-50）是常用解法，但 Bootstrap 5.2+ 才支持 bg-opacity-* 类；老版本只能手写 style="background-color: rgba(0,0,0,0.5)"。
容易踩的坑：用 bg-black + opacity 会把文字也变透明，应只作用于背景层。
- 文字容器用
<div class="p-3"><p class="mb-0">...</p></div>，不要对<p>直接设 opacity - 优先用
bg-dark bg-opacity-75（5.2+）或bg-black+style="background-color: rgba(0,0,0,0.75)" - 深色背景配浅色文字（
text-white），浅色图配深色文字（text-dark），避免依赖单一配色
实际效果取决于图片内容密度和文字长度，文字层不宜过长，否则小屏下换行撑开容器导致布局断裂。最稳妥的方式是限制文字行数（text-truncate 或 CSS line-clamp），并预留足够内边距。
