html - 重叠位置元素后 div 中的空白

Question

我在四个不同的 div 中有两个图像(总共八个图像)。这些图像对中的每一个都以不同的方式在垂直和横向上重叠。

问题是包含的 div 仍然渲染到两个图像的高度。

例如:我有两个高度为 400px 的 div，第二个上有 top: -200px。这意味着我的总高度是 600px，但 div 仍然呈现为 800px。为什么？我们可以做些什么来消除这个空间？

HTML/RAILS:

<div class="feed-images">
    <%= image_tag 'texture-1.jpg', class: 'feed-texture texture-1' %>
    <%= image_tag 'feed-1.jpg', class: 'feed-image feed-1' %>
</div><!-- ".feed-images" -->   

<div class="feed-images">
    <%= image_tag 'texture-2.jpg', class: 'feed-texture texture-2' %>
    <%= image_tag 'feed-2.jpg', class: 'feed-image feed-2' %>
</div><!-- ".feed-images" -->

CSS/SASS:

.feed-images
  width: 100%
  overflow: hidden

.feed-texture
  position: relative
  width: 100%
  z-index: 10

.feed-image
  position: relative
  z-index: 15
  width: 100%

.feed-1
  top: -200px
  left: 40px

.feed-2
  top: -200px
  left: 80px

有什么想法吗？

Answer 1

尝试使用 margin-top 而不是 top，它对我有效

margin-top: -200px

top:行为可能因位置类型(绝对、相对或固定)而异。

margin-top: 用于测量与前一个元素相关的元素的外部距离。