relative positioning

The box’s position is calculated according to the normal flow (this is called the position in normal flow). Then the box is offset relative to its normal position. When a box B is relatively positioned, the position of the following box is calculated as though B were not offset.

Offsetting a relatively positioned box does not disturb the flow, but may cause boxes to overlap. top, right, bottom, and left properties cannot stretch nor shrink the box (they cannot change its size).

According to the sequence in the source code, positioned boxes come in front of floats and boxes in the normal flow.

Computed values are always left = -right and top = -bottom. If the direction of the containing block is ltr, the value of ‘left’ wins and ‘right’ becomes -‘left’. If direction of the containing block is rtl, ‘right’ wins and ‘left’ is ignored. Authors could take advantage of how things work by setting equal value to opposite properties.

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