White-space in div after elements in overlap position

Question

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

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

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

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.

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

White-space in div after elements in overlap position

White-space in div after elements in overlap position

html

css

ruby-on-rails

sass