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

问题描述

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

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

在我的一列中，我希望它包含的图像稍微偏移一点，以便在其上方的列上重叠。

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

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

代码有许多不同的 CSS 文件，所以我只需要链接 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% 应该可以，但是当我这样做时，它会完全覆盖 {position: relative;顶部：-20%}。它只是再次将图像放入 div 中。

解决方法

添加一个完整的答案。

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

{
  margin-top: -20%;
}

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