如何使 div 高度或位置适应其内容的相对位置

Question

所以我试图找到这个问题的答案，但我找不到。也许我只是措辞不当。

这是我的情况。我有一个使用行和列响应式制作的网站。

在我的一个专栏中，我希望它包含的图像稍微偏移，以便与它上面的专栏重叠。

这是它的样子（请注意，每列都添加了红色边框以使其更加明显）：

所以我的问题是这样的。每当我使用 {position: relative; top: -20%;}，它在图像下方创建了一个空的 space，我不知道如何删除它（以蓝色突出显示）。

代码有许多不同的 CSS 文件，所以我只需要 link HTML 部分和 CSS 的摘要，以避免不必要地制作这个复杂。

.resize {
  height: 80%;
}

#is1-img-1 {
  height: auto;
  max-width: 100%;
  position: relative;
  top: -20%;
}

<section id="index-section-1" class="large-padding">
  <!-- Left: image, Right: text -->
  <div class="row">
    <!-- Row 1/2 -->
    <div class="col-s-12 col-l-6 resize">
      <!-- Row content: image -->
      <img id="is1-img-1">
    </div>
    <div class="col-s-12 col-l-6">
      <!-- Row content: text -->
      <img class="line">
      <!-- For line svg - separator -->
      <h2>Enjoyable place for all the family</h2>
      <p>Our relaxed surroundings make dining with us a great experience for everyone. We can even arrange a tour of the farm before your meal.</p>
    </div>
  </div>
  <div class="row flip-on-mobile">
    <!-- Row 1/2 -->
    <div class="col-s-12 col-l-6">
      <!-- Row content: text -->
      <img class="line">
      <!-- For line svg - separator -->
      <h2>The most locally sourced food</h2>
      <p>All our ingredients come directly from our farm or local fishery. So you can be sure that you’re eating the freshest, most sustainable food.</p>
    </div>
    <div class="col-s-12 col-l-6">
      <!-- Row content: image -->
      <img id="is1-img-2">
    </div>
  </div>
</section>

我假设，如果我将 div 的内容移动 20%，那么使 div 本身达到 80% 的高度应该可行，但是当我这样做时，它会完全覆盖{位置：相对;顶部：-20%}。它只是将图像再次放入 div。

Answer 1

为完整性添加一个答案。

解决该问题的方法是使用 20% 的负边距：

{
  margin-top: -20%;
}

关于原始 CSS：由于 position: relative 的工作原理，它会在图像底部生成额外的白色 space。该元素仍然使用原始 space 来影响布局，当使用 top/left/right/bottom 值移动它时，它只会移动视觉对象，但不会更改计算的布局。

如何使 div 高度或位置适应其内容的相对位置

How do I make a div height or position adapt to its content's relative position

html

css

css-position