重叠位置的元素后 div 中的空白答案

【问题标题】：White-space in div after elements in overlap position重叠位置的元素后 div 中的空白
【发布时间】：2015-05-20 15:47:27
【问题描述】：

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

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

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

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

有什么想法吗？

【问题讨论】：

您的.feed 课程是否需要position:absolute;？和你的 div 上的位置？

标签： html css ruby-on-rails sass

【解决方案1】：

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

margin-top: -200px

top: 行为可能因职位类型而异，absolute, relative or fixed.

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

【讨论】：