如何让内容显示在重叠元素下方并兼顾响应式布局

问题场景 #

现有一个Hero图，上方有一个重叠的shell-body盒子，在盒子外部添加下方内容时，内容会显示在盒子后方而非下方，需要实现内容正常显示在盒子下方，同时兼顾响应式布局。

原始代码如下：

HTML #

<div class="shell">
    <div class="shell-header"></div>
    <div class="shell-body">
      <h1>Title</h1>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Placeat vel ducimus illo consectetur commodi ex nulla aut amet ipsum maiores itaque, iusto quam mollitia facilis consequatur tempora neque quod eligendi?</p>
    </div>
  </div>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Placeat vel ducimus illo consectetur commodi ex nulla aut amet ipsum maiores itaque, iusto quam mollitia facilis consequatur tempora neque quod eligendi?</p>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Placeat vel ducimus illo consectetur commodi ex nulla aut amet ipsum maiores itaque, iusto quam mollitia facilis consequatur tempora neque quod eligendi?</p>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Placeat vel ducimus illo consectetur commodi ex nulla aut amet ipsum maiores itaque, iusto quam mollitia facilis consequatur tempora neque quod eligendi?</p>

CSS #

.shell {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

/* overlap */
.shell:before {
  content: "";
  background-image: url(https://i.ibb.co/x866XdV/test-hero.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: bottom;
  position: relative;
  height: 300px;
  width: 100%;
}

.shell-header {
  color: #FFF;
  padding: 0px 20px;
}

.shell-body {
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.25);
  background-color: #FFF;
  max-width: 85%;
  position: absolute;
  top: 80%;
}

body {
  margin: 0;
  font-family: sans-serif;
}

问题根源 #

shell-body使用了position: absolute，会脱离文档流，导致父元素.shell的高度仅由Hero图（:before伪元素）决定，不会被shell-body撑开。后续内容会按照.shell的原始高度排列，视觉上就会被shell-body覆盖。

解决方案 #

去掉绝对定位，改用负margin实现重叠效果，同时让shell-body保留在文档流中，确保父元素能撑开高度，后续内容自然排列在下方。修改后的CSS如下：

.shell {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* overlap */
.shell:before {
  content: "";
  background-image: url(https://i.ibb.co/x866XdV/test-hero.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: bottom;
  height: 300px;
  width: 100%;
}

.shell-header {
  color: #FFF;
  padding: 0px 20px;
}

.shell-body {
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.25);
  background-color: #FFF;
  max-width: 85%;
  /* 负margin实现向上重叠Hero图的效果，数值可按需调整 */
  margin-top: -60px;
  /* 确保盒子在Hero图上方 */
  z-index: 1;
}

body {
  margin: 0;
  font-family: sans-serif;
}

关键说明 #

1. 移除绝对定位：让shell-body回到文档流，父元素.shell的高度会包含shell-body的高度，后续内容自动排在.shell下方。
2. 负margin实现重叠：通过margin-top: -60px让盒子向上移动覆盖Hero图，数值可根据视觉需求调整。
3. z-index层级控制：保证shell-body在Hero图上方，避免被遮挡。
4. 响应式兼容：max-width: 85%和Hero图的background-size: cover已提供基础响应式支持，如需更细致适配，可添加媒体查询调整margin-top或盒子宽度。

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