通过为标题元素添加底部外边距（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 结构示例：

Html To Pdf

使用 Puppeteer + Chrome 将 HTML 渲染为中文 PDF，自动处理图表等待、Tab 展开、动画、测高、白边消除、防分页，适用于看板、报表、网页和交互图表转 PDF。

下载

<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），而非绕过流进行绝对定位。 这种方式语义清晰、易于维护，且天然支持响应式与无障碍访问。