HTML positioning element without blank space

Question

I have two elements (images)

imgA is 2000px high imgB is 1000px high

I place them one after the other and then move imgB up (I use relative positioning) to overlap the imgA.

Thus, the window in the browser should be 2000px high.

However, it seems, that when placing imgA and then imgB, the browser allocates the place for both of them i.e. 3000px hig, and after I move imgB up to overlap imgA, I have a blank space =1000px left at the bottom of the page.

How can this blank space be prevented?

Thanks

Answer 1

Ignore this

This is because the images are block level elements. To stop the browser from allocating space you can just add: display:inline-block to the second image. This will bring the image out of block structure and so the browser will not allocate it whitespace.

Also have a look at Relatively Absolute positioning, it is very handy for the sort of thing you are doing.

---

EDITED

As commented below, this does not work. Use instead the Relatively Absolute positioning.

Here is a jsFiddle that shows the code needed to position an image over another

Answer 2

Use display: block on your images, then use position: absolute instead of position: relative to position imgB over imgA.

Don't forget to assign the parent element to anything other than position: static to make the positioning of your image relative to the parent element.