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 negative top value moves the yellow box upward, but the positive bottom value keeps the following box in place.

The box styled as suggested below would display the same, but would also create a different stacking and positioning context (because of position:relative).

Style the yellow box with:

	position: relative;
	top: -100px;

Try These

Watch This


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).