图片文字叠加布局的关键是父容器设position: relative，子元素用absolute定位并配合z-index控制层级，再用transform实现居中及响应式适配。
图片和文字叠加布局其实不难，关键在于理解 position: absolute 的定位基准和层叠逻辑。只要父容器设为相对定位，子元素用绝对定位就能精准覆盖。
父容器必须设为 position: relative
这是实现覆盖的前提。absolute 元素会相对于最近的已定位（relative、absolute 或 fixed）祖先元素定位。如果父容器没设定位，它就会往上找，甚至跑到 body 上去，导致位置失控。
- 给包裹图片和文字的外层容器（比如
div）加上position: relative - 不需要设置
top/left等偏移值，仅声明relative就够了
图片作为背景，文字用 absolute 叠加在上层
常见做法是把图片放在底层（可设为 img 标签或背景图），文字用单独标签（如 h2、p）并绝对定位到指定位置。
- 图片保持默认文档流，或设
position: static（默认值） - 文字标签加
position: absolute，再用top、left、right、bottom调整位置 - 用
z-index明确层级，比如文字设z-index: 2，图片设z-index: 1（非必需，但推荐）
居中覆盖文字的小技巧
想让标题或按钮精确居中在图片中央？不用 JS，纯 CSS 就能搞定。
立即学习“前端免费学习笔记（深入）”；
- 文字设
position: absolute; top: 50%; left: 50% - 再加
transform: translate(-50%, -50%)抵消自身宽高一半的偏移 - 这样无论文字多长、字体多大，都能真正居中
响应式下注意尺寸变化带来的错位
图片缩放或容器变宽时，绝对定位的文字可能跑偏。解决方法：
- 优先用
%、vw、vh或flex+absolute混合布局提升适应性 - 对关键断点（如手机屏）用媒体查询重设
top/left - 避免固定像素值（如
top: 120px），改用相对单位更稳妥
不复杂但容易忽略的是：忘记给父容器加 relative，或者没处理好 z-index 层级。只要理清定位上下文和堆叠顺序，叠加效果就非常可控。
