negative margin

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 top value makes both the yellow and pink boxes move up (#pink follows #yellow). Then the bottom value create additional offset for the pink box that moves higher up.

Note that all backgrounds are painted behind the text inside the three boxes.

In IE6 and 7, the only visible content is the one from the box which is higher in the stack (#pink).

Style the yellow box with:

	margin: -1.4em 0 0;

Try These

Watch This

aqua
yellow
pink

Check This

<div id="aqua">aqua</div> <div id="yellow">yellow</div> <div id="pink">pink</div>

Edit This

Use shift + enter to create new lines (even in Safari and Chrome).