如何响应地关闭两个<div>之间的空白差距？

Question

根据屏幕大小，图像和博客标题之间的空格增加/减少：

我怎样才能让它们一直触摸？

HTML

<img class="main-image" src="/assets/walking.jpg">
<div class="overlay-image">
  <div class="blog-caption">
    A DAILY BLOG ABOUT THE
    JOURNEY & CHALLENGES
  </div>
  <%= render 'subscribes/subscribe.html.erb' %>
</div>

<div class="blog-page">
  Blog post title & text.
</div>

CSS

main-image {
  width: 100%;
  position: relative;
}

.overlay-image {
  position: relative;
  text-align: center;
  margin-top: -47%; # I think this is the main culprit, but I don't know how to edit without altering the position of the things on the image
  height: 201px;
}

.blog-caption {
  text-align: center;
  font-size: 18px;
  color: white;
  margin-top: 0px;
  margin-bottom: 18px;
  padding-top: 8px;
  background-color: rgba(44,62,80, 0.8);
  padding-bottom: 8px;
}

.blog-page {
  @media (max-width: 992px) {
    padding-top: 0px;
    margin-top: -40px;
  }
}

Answer 1

是的，正如您已经怀疑的那样：首先从.overlay-image中删除负边距。然后将position: absoulte添加到.blog-caption并使用top和left设置调整其位置。

Answer 2

也许你应该看看z-index。 然后，您可以将图像放入容器中，以用于类.overlay-image中的花哨文本。 有了这个，你可以摆脱那些-x％的保证金。也许这可以帮助你解决问题。