用 position: absolute 是因为标题需精准锚定图片角落且不占文档流；relative 会保留占位导致布局异常，absolute 配合父容器 relative 才能稳定定位。
图片标题覆盖层为什么用 position: absolute 而不是 position: relative
因为标题需要精准贴合图片右下角（或其他角落），且不挤占文档流空间——relative 仍保留原始占位，会导致父容器高度异常或文字错位；absolute 脱离流后，配合 top/right 和 transform 才能稳定锚定。父容器必须设 position: relative，否则 absolute 会向上找最近定位祖先，可能跑到 body 上去。
常见错误现象：title 漂到页面左上角、图片下方留出大片空白、多张图标题堆叠在同一个位置。
- 父容器（如
<figure>或<div class="img-wrap">）必须加position: relative - 标题元素（如
<figcaption>或<span class="overlay-title">）设position: absolute+bottom: 0+right: 0 - 为避免文字紧贴边缘，用
padding或transform: translate(-10px, -10px)微调，比纯right/bottom更可控
媒体查询中该改哪些值：字体大小、内边距还是定位偏移
三者都要调，但优先级不同：小屏下先缩字体和内边距，再微调定位偏移。直接改 bottom/right 容易导致标题在某些设备上被截断或溢出；而只调字体不调 padding，会让文字“顶”到边缘，可读性下降。
使用场景：手机竖屏（max-width: 480px）、平板横屏（min-width: 768px）、桌面大屏（min-width: 1200px）。
立即学习“前端免费学习笔记（深入）”；
- 手机端：字体设
font-size: 14px，padding: 6px 10px，transform: translate(-6px, -6px) - 平板端：恢复
font-size: 16px，padding: 8px 12px，transform: translate(-8px, -8px) - 桌面端可加
background: rgba(0,0,0,0.7)提升对比度，但 opacity 不宜低于0.6，否则低亮度屏看不清
z-index 多少才够用？会不会和轮播图/弹窗冲突
单纯覆盖图片时，z-index: 1 就够；但一旦页面里有 modal、dropdown 或 carousel，它们常用 z-index: 1000+，这时标题层若没显式声明更高值，就会被盖住。更麻烦的是，如果父容器用了 transform 或 will-change，会创建新层叠上下文，让子元素的 z-index 只在内部生效。
- 保险做法：标题层设
z-index: 10，父容器不加transform（除非必要） - 若父容器已存在层叠上下文，标题需在同级上下文中靠前声明，或把标题提到父容器外（用 JS 动态挂载）
- 检查冲突方法：在 DevTools 中选中标题，看
Computed面板里的z-index是否生效，以及Containing block是哪个元素
响应式覆盖层在 Safari iOS 上文字模糊怎么办
这是 WebKit 的经典渲染 bug：当元素同时满足 position: absolute + transform + backface-visibility: hidden（或 translateZ(0)）时，Safari 会启用硬件加速，但有时导致 subpixel 渲染失效，文字发虚。不是所有机型都出现，iOS 15–16 较常见。
- 临时修复：去掉
transform，改用right: 8px+bottom: 8px+margin控制间距 - 长期方案：对 Safari 加
@supports (-webkit-appearance: none)，里面重写定位逻辑 - 别用
text-rendering: optimizeLegibility，它在移动端反而加重模糊
真正难处理的是多图并排时，每张图的标题要各自响应，又不能靠 JS 计算宽高——这时候得靠 CSS Grid + aspect-ratio 配合，但那是另一回事了。
