在重叠位置元素之后的div中的空白

Question

我在四个不同的div中有两个图像(总共八个图像)。每个图像对以不同的方式重叠，无论是垂直的还是横向的。

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

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

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:行为可能因职位类型不同而不同，absolute, relative or fixed.

边距-顶部：用于测量到元素的外部距离，相对于前一个元素。