使用绝对定位图片后如何让页面布局流正常延续？

我想把内容放在需要叠加的图片下方，为了实现图片叠加，我给图片设置了position: absolute（绝对定位），但操作后，原本应该在图片下方的内容全部跑到了页面顶部，试了各种方法都没法让内容回到图片下方。相关代码示例如下：

原始CSS代码 #

.container {
  position: relative;
}

.container img {
  position: absolute;
  z-index: -1;
  /* 方便查看.more-page-content */
}

原始HTML代码 #

<header>
  页面顶部的头部
</header>
<main>
  <div class="container">
    <img src="https://i.imgur.com/ww9TYQv.jpg" alt="色块">
    <img src="https://i.imgur.com/mqReB3b.png" alt="示例图">
  </div>
  <div class="more-page_content">应该在图片下方的文本</div>
</main>
<footer>
  页面底部的页脚
</footer>

问题根源 #

给图片设置position: absolute后，元素会脱离正常文档流，父容器.container因为没有可撑开高度的内容，会变成高度为0，导致后面的.more-page_content和页脚直接往上移动，和图片区域重叠。

解决方法 #

核心思路是让.container保持和图片一致的高度，下面是三种可行方案：

方案1：固定高度（适合图片尺寸固定的场景）

如果图片尺寸是固定值，直接给.container设置对应高度：

.container {
  position: relative;
  height: 600px; /* 替换为你的图片实际高度 */
}

.container img {
  position: absolute;
  z-index: -1;
  width: 100%; /* 可选：让图片铺满容器宽度 */
}

方案2：使用aspect-ratio（现代浏览器优先推荐）

如果图片按比例缩放，用aspect-ratio属性匹配图片的宽高比（比如示例图片是4:3比例）：

.container {
  position: relative;
  aspect-ratio: 4/3; /* 替换为你的图片实际宽高比 */
  width: 100%; /* 可选：让容器占满可用宽度 */
}

.container img {
  position: absolute;
  z-index: -1;
  width: 100%;
  height: 100%;
  object-fit: cover; /* 可选：保持图片比例，避免拉伸变形 */
}

方案3：padding-top百分比技巧（兼容旧浏览器）

利用padding百分比基于容器宽度计算的特性，设置对应比例的padding-top撑开容器高度（4:3比例对应75%，即3÷4=0.75）：

.container {
  position: relative;
  width: 100%;
  padding-top: 75%; /* 替换为你的图片高度/宽度的百分比 */
}

.container img {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
}

修改后，.container会拥有和图片匹配的高度，后续内容就会自然排在图片下方。

内容的提问来源于stack exchange，提问作者Colin 't Hart