Question

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

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

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

HTML /扶手：

<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： 的行为可能因位置类型而异[{1}}

margin-top： 用于衡量与元素相关的外部距离。

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

1 个答案: