CSS如何让嵌套在带背景图父元素内的标题置于父下方且保持自然流

可行实现方案 #

方案1：固定背景显示高度（最简单，适配大部分场景） #

核心思路是将背景图固定显示在父容器上方指定区域，将包裹标题的容器通过外边距顶到背景区域下方，完全处于正常文档流，自动撑开父容器高度推动后续内容。
需要添加/修改的CSS如下：

/* 覆盖/新增parent样式 */
.parent {
  height: auto; /* 替换原有的height: 100%，让父容器高度由内容自动撑开 */
  background-size: 100% 300px; /* 300px替换为你需要的背景图实际显示高度，可换为80vh等视口单位 */
  background-repeat: no-repeat;
  background-position: top center;
}

/* 覆盖/新增headers-wrap样式 */
.headers-wrap {
  margin-top: 300px; /* 数值和上面背景图设置的显示高度保持一致 */
}

方案2：背景图自适应比例（需保持background-size: cover的场景） #

如果需要背景图保持原有比例自适应显示，不固定高度，可以用如下实现：

/* 覆盖/新增parent样式 */
.parent {
  height: 0;
  padding-top: 56.25%; /* 按背景图比例设置，比如16:9对应56.25%，4:3对应75% */
  position: relative;
  background-size: cover;
}

/* 新增中间层统一样式，所有嵌套在parent下的直接子容器都生效 */
.parent > div,
.parent > div > div,
.parent > div > div > div,
.parent > div > div > div > div {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* 覆盖/新增headers-wrap样式 */
.headers-wrap {
  top: 100% !important;
  height: auto !important;
}

两种方案都不需要修改DOM结构，标题完全处于正常文档流，父容器高度会自动包含背景区域+标题高度，后续内容会自动被向下推挤，符合所有需求。

内容的提问来源于stack exchange，提问作者Kenny J