我在四个不同的div中有两个图像（总共八个图像）。这些图像对中的每一个在垂直和横向上都以不同的方式重叠。
问题在于，包含div的渲染效果仍然达到了两个图像的高度。
例如：我有两个高度为400px的div，第二个top: -200px在上面。表示我的总高度为600像素，但div仍呈现为800像素。为什么？我们该怎么做才能消除这个空间？
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
有什么想法吗？
尝试使用margin-top代替top，它对我有效
margin-top: -200px
页首：行为可能会因职位类型而异，absolute, relative or fixed.
margin-top：用于测量到元素的相对于上一个元素的外部距离。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句