Reducing height of html document

I have this situation:

I made 2 div's, both should be at the exact same spot. By JavaScript, I can activate one if I want and hide the other. That's how I did it:

<div style="height:100px"></div>
<div style="position:relative; top:-100px;height:100px"></div>

This works pretty well. But I noticed that the place where you would expect the second div (without the top:-100px) is used by blank space.

What is the most elegant w开发者_如何学Cay to get rid of that space again? I don't want that my webusers think they can scroll down more but there is just white space left.

Thanks for your tips! I hope my description is clear enough, it's not that easy to describe. ;)

they are not in the same spot, relative divs always leave the spot they moved from occupied by blank space. you need to use 'position:absolute' or negative margins. You can still position them in the flow if you need by wrapping them both in the same relative div.