html - 在相对位置 div 内重叠 div

Question

我试图让两个 div 重叠。一个带有背景图像，一个只有文本与右下角的图像重叠。但我想将每个“集合”包装在一个 div 中(如果可能，我想使用 section)这样我就可以更轻松地将它们分开(创建 WordPress 主题)，因为每个集合都是一个接一个地放置.

编辑:我故意希望文本位于图像 div 下方。这就是为什么我想把它们都包起来，这样一个上的文本就不会与下一组重叠。

例如

section {
  position: relative;
  margin: 10px 0;
  height: inherit;
}

#article-txt {
  min-height: inherit;
  position: absolute;
  max-width: 70%;
  z-index: 25;
  bottom: -150px;
  right: 0;
  padding: 25px 25px 0 25px;
}

#article-img {
  display: block;
  position: relative;
  min-height: 450px;
  margin: 0 auto;
  background-size: cover;
}

<section>
  <div id="article-txt">
    text text
  </div>
  <div id="article-img" style="background-image:url('...');">
  </div>
</section>

Answer 1

具有负底部值意味着从底部更远向下而不是向上。当您从任何方向使用正值时，它们 move to the center如果为负，他们就会离开。

因此，如果您使用 bottom;0px那么它将停留在图像的底部，如果你使用 positive value底部说 50px，它会向中心移动 50px，即向上。

section {
  position: relative;
  margin: 10px 0;
  height: inherit;
  margin-bottom:170px;
}

#article-txt {
  min-height: inherit;
  position: absolute;
  max-width: 70%;
  z-index: 25;
  right: 0;
  bottom:-150px;
  padding: 25px 25px 0 25px;
}

#article-img {
  display: block;
  position: relative;
  min-height: 450px;
  margin: 0 auto;
  background-size: cover;
}

<section>
  <div id="article-img" style="background-image:url('http://via.placeholder.com/200x150');">
  </div>
  <div id="article-txt">
    text text
  </div>
</section>
RANDOM STUFF RANDOM STUFF RANDOM STUFF RANDOM STUFF RANDOM STUFF RANDOM STUFF RANDOM STUFF RANDOM STUFF RANDOM STUFF RANDOM STUFF RANDOM STUFF RANDOM STUFF RANDOM STUFF RANDOM STUFF RANDOM STUFF RANDOM STUFF RANDOM STUFF RANDOM STUFF RANDOM STUFF RANDOM STUFF RANDOM STUFF RANDOM STUFF RANDOM STUFF RANDOM STUFF RANDOM STUFF RANDOM STUFF RANDOM STUFF RANDOM STUFF RANDOM STUFF RANDOM STUFF RANDOM STUFF RANDOM STUFF RANDOM STUFF RANDOM STUFF RANDOM STUFF RANDOM STUFF RANDOM STUFF RANDOM STUFF RANDOM STUFF RANDOM STUFF RANDOM STUFF RANDOM STUFF RANDOM STUFF RANDOM STUFF RANDOM STUFF RANDOM STUFF RANDOM STUFF RANDOM STUFF RANDOM STUFF RANDOM STUFF RANDOM STUFF RANDOM STUFF RANDOM STUFF

更新:如果您使用绝对位置，则没有换行可以解决该问题。它将与下一个内容重叠，因为下一个内容不考虑绝对定位的内容。

解决方法是什么？

您可以设置 margin-bottom of the <section>到文本的负底值或更多。因此，如果您使用 bottom:-150px，则可以将该部分的底部边距设置为 150px 或更多。