CODEWITHSUNDEEP
htmlcssruby-on-railssass
JLF
JLF

Reputation: 2360

White-space in div after elements in overlap position

I have two images in four different divs (eight images total). Each of these image pairs are overlapping in a different way, both vertically and laterally.

The issue is the containing div still renders to the height of both images.

For example: I have two divs that are 400px in height, the second has top: -200px on it. Meaning my total height is 600px, but the div still renders to be 800px. Why? And what can we do to eliminate this 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

Any thoughts?

Upvotes: 1

Views: 387

Answers (1)

Dyrandz Famador
Dyrandz Famador

Reputation: 4525

try using margin-top instead of top, it works on me

margin-top: -200px

top: behavior can differ depending on the type of position, absolute, relative or fixed.

margin-top: is for measuring the external distance to the element, in relation to the previous one.

Upvotes: 1

Related Questions