无需媒体查询修复Hero图片与文本框重叠内容遮挡问题

核心思路 #

通过相对定位+负外边距实现文本框对Hero图的覆盖，同时让容器自动撑出足够高度，后续内容会自然跟随在区块下方，完全不需要通过媒体查询调整内边距。

关键修改点 #

• 移除.wrapper的所有内边距和媒体查询规则，后续内容会自动适应布局
• 将.shell-body的绝对定位改为相对定位，用负外边距实现向上覆盖
• 确保.shell容器能自动包含Hero图和文本框的整体高度，避免遮挡后续内容

修改后的完整代码 #

CSS

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

/* Hero图样式 */
.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%;
  position: relative; /* 替换absolute为relative */
  margin-top: -80px; /* 负外边距实现向上覆盖，可根据需求调整数值 */
}

img {
  width: 20%;
  height: 20%;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

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

/* 移除所有wrapper相关的padding和媒体查询 */
.wrapper {
  /* 无需额外padding */
}

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>
<div class="wrapper">
  <img src="https://upload.wikimedia.org/wikipedia/commons/3/3f/Placeholder_view_vector.svg" alt="">
</div>

效果说明 #

• Hero图保持300px高度，文本框通过margin-top: -80px向上覆盖在Hero图底部
• .shell容器的高度会自动计算为「Hero图高度 + 文本框高度 - 负外边距数值」，后续的.wrapper内容会自动排在.shell下方，不会被遮挡
• 无论屏幕尺寸如何变化，布局都会自动适配，完全不需要媒体查询调整

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