文字没盖在图片上，主因是定位上下文缺失：父容器未设position: relative，导致absolute文字相对于body定位而飘走；必须用div包裹img和文字、设relative、加min-height或aspect-ratio撑高容器，并确保img设display: block。
为什么文字没盖在图片上？定位上下文缺失是主因
直接给 <img> 加 position: absolute 的文字，大概率会飘到页面顶部或页眉区域——因为 <img> 默认是 inline 元素，其父容器若没设 position: relative，绝对定位元素就会上溯找最近的「已定位祖先」，常落到 #masthead 或 body 上。
必须显式创建定位上下文：
- 用
<div class="image-container"> 包裹 <code><img>和文字层 - 给该
div加position: relative - 关键：加
min-height（如min-height: 320px），否则容器高度坍缩为 0，定位基准失效 -
<img>加display: block消除底部默认间隙 - 底部居左：
bottom: 0; left: 0;+width: 100% - 底部居中：
bottom: 0; left: 50%; transform: translateX(-50%); - 右上角：
top: 12px; right: 12px; - 避免用
top: 0+height: 100%，容易撑破容器
用 position: absolute 定位文字层的实操要点
文字层必须是 <div> 或 <code><p></p> 等块级元素，不能塞进 <img> 标签里（HTML 规范不允许）。
常见锚点位置写法：
示例结构：
<div class="image-container"> @@##@@ <div class="caption">苏格兰城堡</div> </div>
半透明背景怎么调才不糊？rgba() 与伪元素二选一
文字可读性取决于背景对比度。纯黑 rgba(0,0,0,0.6) 在暗图上发灰，纯白 rgba(255,255,255,0.8) 在亮图上刺眼——建议优先用黑底+0.4～0.6透明度，再配白色文字。
两种主流实现方式：
- 直接子元素法：文字层自己设
background-color: rgba(0,0,0,0.5)，简单直接 - 伪元素法：
.image-container::before覆盖全图蒙版，文字层单独设z-index: 2，好处是蒙版与文字解耦，方便复用 - 别用
mix-blend-mode做蒙版——它依赖兄弟元素视觉重叠，且 IE/旧 Safari 不支持
响应式下文字层错位？宽高与图片比例要对齐
当图片用 width: 100%; height: auto; 自适应时，容器高度会变，但 min-height 是固定值，可能导致文字层在小屏上“悬空”或被截断。
稳妥做法：
- 容器用
aspect-ratio: 16/9（现代浏览器），替代min-height - 或图片用
object-fit: cover+ 容器设固定宽高比类名 - 文字层用
padding: clamp(8px, 3vw, 16px)替代固定像素内边距 - 测试加载延迟场景：图片未加载完时，
<img src="photo.jpg" alt="风景">高度为 0，min-height能兜底；aspect-ratio则需配合loading="lazy"和占位符
最易被忽略的一点：所有涉及定位的父容器，只要内部有 position: absolute 子元素，就必须自己扛起高度责任——不是靠图片撑开，而是靠你写的 min-height 或 aspect-ratio。
