CSS Negative Top Positions Next Element Incorrectly

This may seem like an absolute silly post, but last night after a 5 hour coding session I couldn't figure out why I was having issues with some CSS positioning.

I had three elements, and I wanted the second element to appear on top of the lower part of the first element. So naturally I used:

.second { position: relative; top: -200px; }

At first, cool it works. But the problem is, it basically pushes up the element but doesn't affect the original place it was in, so the third element was appearing much further down and didn't look good at all.

To fix this, I tried the following...:

.second { position: relative; top: -200px; margin-bottom: -200px; }

At first this looked like it worked too, but I was having issues with the height of the third element being screwed up.

Now.. I was really tired, and it took me a ridiculous amount of time to realize that the simple fix was to simply use margin-top with a negative value instead of top:

.second { position: relative; margin-top: -200px; }

And voila, it works like I had intended it to. After that I decided it was time to go to sleep :)