Relative positioning in CSS is one of those concepts that confuses even the most experienced of designers - and the browser programmers too it would seem. The big question is 'relative to what?'
In theory, when you place a box using relative positioning, it 'relates' to whatever is above it and to the left margin so, if you put one box on a page, it floats to the top like a block of polystyrene in water. When you put another box in, it's like putting another block of polystyrene under the first one; it floats up hard against the bottom of the first, and so on. You can offset the left of each box relative to the left margin to stagger them horizontally. That's all fine.
The trouble comes when you start to use the 'top' property along with relative positioning. You can move a box up or down relative to the bottom of the box above by giving the 'top' property a negative or positive value - but what happens to any boxes below that? The 'real world' polystyrene blocks would float up or down to match the bottom of the one above, but CSS specs call for it to stay put. Unfortunately, the browser manufacturers do not agree and virtually anything can happen - and usually does.