文字框用 absolute 定位时，其父容器必须设 position: relative（而非图片本身）；否则会相对于最近已定位祖先偏移；top/left 始终以父容器内容区左上角为原点，不随图片实际位置变化。
文字框用 position: absolute，图片父容器必须设 position: relative
否则文字框会相对于最近的已定位祖先（可能是 或某个外层布局容器）偏移，导致位置飘走。关键不是“图片本身加 relative”，而是它所在的直接父元素——通常是你自己写的包裹容器。
常见错误：给 标签直接加 position: relative，这没用；absolute 元素只认“已定位的父辈”，而 一般没有子元素，也不作为文字框的父级。
- 正确结构是：
@@##@@ 说明文字
- 如果图片和文字框不在同一层 DOM，比如文字框在图片组件外部，那得确保它们共同的最近父容器有
position: relative（或absolute/fixed） - 避免给
或全局布局容器误加position: relative，可能影响整页其他绝对定位元素
top/left 值是相对于父容器左上角，不是图片左上角
哪怕图片有 margin、padding、border，或者被 transform 移动过，absolute 文字框的 top/left 仍以父容器内容区左上角为原点。它不感知图片实际渲染位置。
- 若需精准对齐图片某一部分（比如右下角），先用开发者工具测出图片在父容器内的偏移量，再手动计算
top/left - 图片宽高未知时，慎用
right: 0; bottom: 0—— 若父容器比图片大，文字框会贴到父容器右下，而非图片右下 - 想让文字框始终随图片缩放？仅靠 CSS 定位做不到，需 JS 监听图片加载/尺寸变化后动态更新
style.left/style.top
z-index 不生效？检查父容器是否形成新层叠上下文
即使设置了 z-index，文字框也可能被图片盖住，常见原因是父容器触发了层叠上下文（如设置了 opacity 、transform、filter 等），导致其内部所有子元素被限制在该上下文中排序。
- 确认父容器没带
opacity: 0.99、transform: translateZ(0)、will-change: transform等隐式创建层叠上下文的属性 - 文字框和图片若都在同一 relative 父容器内，且都未设
z-index，则按 HTML 流顺序：后写的元素默认在前一个之上 - 安全写法：
@@##@@ 说明文字
响应式场景下，absolute 定位容易失效
图片宽度随屏幕变窄时，固定写死的 left: 20px 可能让文字框跑出图片范围，甚至溢出父容器。这不是 bug，是 absolute 的固有行为。
- 优先考虑用 Flexbox 或 Grid 实现图文叠加（例如
display: flex+flex-direction: column+justify-content: center），更健壮 - 必须用 absolute 时，改用百分比或
calc()：left: calc(50% - 40px)（假设文字宽 80px） - 移动端建议配合媒体查询重置定位值：
@media (max-width: 768px) { .caption { top: 5px; left: 10px; } }
CSS 绝对定位本身简单，难的是控制它“相对谁”以及“在什么条件下保持预期位置”。真正卡住人的，往往是父容器的定位状态、层叠上下文干扰、还有响应式断点下的尺寸错位——这些地方多看一眼 computed styles 就清楚了。
