容器内两个Div重叠问题求助：如何实现元素互不重叠

你的问题核心在于绝对定位的元素会脱离正常文档流，所以.showcase完全不受.hp_slogan内容高度的影响——当浏览器高度缩小到不足以容纳两个元素的总高度时，自然就会出现重叠。咱们可以用Flexbox来完美解决这个问题，既能保证.showcase牢牢贴在容器底部，又能让两个元素互相撑开，完全保留你设置的padding效果。

具体修改方案 #

把.Container1改成Flex容器，通过垂直排列子元素+空间分配的方式，替代原来的绝对定位方案，代码如下：

修改后的CSS #

.Container1 {
  overflow-y: auto; /* 内容超出容器高度时允许垂直滚动，避免内容被截断 */
  height: 100vh;
  width: 100%;
  margin: 0;
  background: rgb(74, 105, 113);
  background: linear-gradient(90deg, rgba(74, 105, 113, 1) 0%, rgba(129, 161, 170, 1) 60%, rgba(181, 207, 214, 1) 100%);
  text-align: center;
  display: flex; /* 启用Flexbox布局 */
  flex-direction: column; /* 让子元素垂直排列 */
}

.hp_slogan {
  padding-top: 20%;
  padding-bottom: 3%;
  flex-grow: 1; /* 让这个元素占据容器内除.showcase外的所有可用空间 */
  display: flex;
  flex-direction: column;
  justify-content: center; /* 可选：让slogan内容垂直居中，适配你原来的padding-top效果 */
}

.showcase {
  /* 移除导致脱离文档流的绝对定位属性 */
  /* position: absolute; */
  /* bottom: 0; */
  display: block;
  padding-top: 2rem; /* 可选：给showcase加顶部内边距，避免和slogan贴得太近 */
}

对应的HTML（无需修改） #

<div class="Container1">
  <div class="hp_slogan">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>
  <div class="showcase">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>
</div>

方案为什么有效？ #

1. Flexbox的文档流特性：两个子元素都处于正常文档流内，当.hp_slogan内容高度增加（或窗口缩小）时，会自动推开.showcase，彻底避免重叠。
2. flex-grow: 1：让.hp_slogan占据容器内除.showcase之外的所有空间，既保证.showcase始终贴在底部，又让slogan的内容有足够的展示区域。
3. overflow-y: auto：当容器内总内容高度超过100vh时，自动出现垂直滚动条，不会截断内容，体验更友好。

如果你不需要滚动效果，希望容器始终固定100vh，内容超出时裁剪，可以把overflow-y: auto改回overflow: hidden，但这种情况可能会导致部分内容被隐藏，建议保留滚动设置。

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