The yellow boxes are 2ems high and in the flow; the green and red boxes in each set are identical except that the red ones are absolutely positioned.

http://lists.w3.org/Archives/Public/www-style/2007Apr/0007.html explains how the position of the red boxes should be calculated, according to CSS 2.1. In particular, there should be no margin above the first red box.

Margin-top 0

margin-bottom: 1em;

margin-top: 0em

Result: 1em

margin-bottom: 1em;

margin-top: 0em
position: absolute
Result: 0em

Margin-top +1em

margin-bottom: 1em;

margin-top: 1em

Result: 1em

margin-bottom: 1em;

margin-top: 1em
position: absolute
Result: 1em

Margin-top −1em

margin-bottom: 1em;

margin-top: −1em

Result: 0em

margin-bottom: 1em;

margin-top: −1em
position: absolute
Result: −1em