如何将<p>文本置于背景图片底部之后，同时保留<h1>原有位置？

可以通过两种方式实现需求，让<p>元素内容显示在背景图片底部之后，同时保留<h1>的原有位置：

方法一：通过外边距偏移段落 #

这种方法基于现有HTML结构修改，无需调整标签层级：

1. 先确保背景图片仅在顶部显示不重复，修改body的CSS：

body {
  background-color: #15141A;
  background-image: url("https://sputnick.fr/header.jpg");
  background-repeat: no-repeat; /* 禁止背景图重复覆盖 */
  background-position: top center; /* 让背景图顶部居中 */
  color: white;
  font-family: "Arial";
  font-size: 16px;
}

2. 给所有<p>元素设置顶部外边距，值等于背景图片的实际高度（比如背景图高度为300px，需根据真实尺寸调整）：

p {
  margin-top: 300px; /* 替换为背景图的真实高度 */
}

方法二：用容器划分区域（更易维护） #

将背景图和<h1>放在独立容器中，<p>自然处于容器下方，无需计算偏移量：
修改后的HTML：

<div class="header-banner">
  <h1>foobar</h1>
</div>
<p>lorem ipsum doloris</p>
<p>lorem ipsum doloris</p>
<p>lorem ipsum doloris</p>
<p>lorem ipsum doloris</p>

对应的CSS：

.header-banner {
  background-image: url("https://sputnick.fr/header.jpg");
  background-repeat: no-repeat;
  background-position: top center;
  background-size: cover; /* 让背景图适配容器宽度 */
  height: 300px; /* 设置为背景图的真实高度 */
  padding: 0 20px; /* 可选：给h1添加左右内边距，避免贴边 */
  display: flex;
  align-items: center; /* 可选：让h1在容器内垂直居中 */
}

body {
  background-color: #15141A;
  color: white;
  font-family: "Arial";
  font-size: 16px;
  margin: 0; /* 清除body默认外边距 */
}

p {
  margin: 20px; /* 可选：给段落添加左右外边距，提升可读性 */
}

内容的提问来源于stack exchange，提问作者Gilles Quénot