在相对位置div内重叠div

Question

我想让两个div重叠。一个带有背景图像，一个带有文本，与右下角的图像重叠。但是我想把每一套＆＃39;包裹起来。在div中（如果可能的话，我想使用section）这样我就可以更容易地将它们分开（创建WordPress主题），因为每个集合都是一个接一个地放置。

编辑：我故意希望文字低于图片div。这就是为什么我要将它们包装起来以便一个文本不与下一组重叠。

ex

＆＃13;

＆＃13;

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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

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

因此，如果您使用bottom;0px，那么它将保留在图片的底部，如果您使用positive value，底部为50px，则会向中心移动 50px，即向上< / em>的

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>设置为文本的负底值或更多。因此，如果您使用的是底部：-150px，则可以将该部分的边距设置为150px或更高。