通过为标题元素添加底部外边距（margin-bottom），可精准控制后续段落与背景图底部的垂直间距，实现段落内容自然“落在”背景图之后的效果。
在当前布局中，<h1> 作为文档流中的首个块级元素，其后紧跟的 <p> 元素会紧随其后渲染。而背景图（background-image）是作用于 body 的装饰性层，并不参与文档流——也就是说，它不会自动“推下”后续内容。因此，要让所有 <p> 文本视觉上出现在背景图下方，关键不是移动背景图，而是为 <h1> 添加足够的底部留白，使其占据足够高度，从而将后续段落“压”到背景图可视区域之外。
推荐做法是：为 <h1> 添加一个语义清晰的类名（如 class="hero-title"），并使用相对单位（如 %、vh 或 rem）设置 margin-bottom，以适配不同屏幕尺寸：
.hero-title {
margin-bottom: 25vh; /* 推荐：基于视口高度，响应性强 */
/* 或者使用百分比（需注意父容器高度上下文） */
/* margin-bottom: 30%; */
}HTML 结构示例：
<h1 class="hero-title">foobar</h1> <p>lorem ipsum doloris</p> <p>lorem ipsum doloris</p> <!-- 更多段落 -->
⚠️ 注意事项：
- 避免直接对 body 设置 padding-bottom，这会影响整个页面底部布局，且无法精准对齐标题与背景图底边；
- 不建议用 position: absolute 或 transform 移动段落——会破坏文档流，影响可访问性和响应式行为；
- 若背景图高度固定（如 header.jpg 为 600px），也可用 margin-bottom: 600px，但缺乏响应性，不推荐用于现代 Web 开发；
- 最佳实践是结合 background-size: cover 和 background-position: top center 确保背景图始终覆盖顶部区域，再用 vh 单位预留空间。
总结：控制内容流的位置，应优先利用文档流本身的盒模型属性（如 margin），而非绕过流进行绝对定位。 这种方式语义清晰、易于维护，且天然支持响应式与无障碍访问。
