Negative top and left margins move the element up and left while negative right and bottom margins make following siblings move left and up.
The aqua box moves to the left bringing its next siblings with it. Then the yellow box moves farther to the left, bringing the last sibling with it. This last box now moves even farther to the left. Visually, the three boxes appear in reverse order (#pink, #yellow, and #aqua).
IE 6 and 7 do not offset the three boxes to display them next to each other. Instead, these boxes share the same left offset in relation to the parent container as if they were all floats (see next test case).
For these boxes to show in IE 6 and 7, we style them with:
zoom: 1; position: relative;