« Back  |   Introduction  |   Contents  |   Next »

1. Overview of CSS positioning

Static positioning

A statically positioned box is one that is in normal flow.

Float positioning

A floated box is positioned within the normal flow, then taken out of the flow and shifted to the left or right as far as possible. Content may flow along the side of a float.

Relative positioning

Relatively positioned elements are positioned within the normal flow and then moved. Elements that come after a relatively-positioned element behave as if the relatively-positioned element was still in its ‘normal flow’ position - leaving a gap for it.

Absolute positioning

An absolute positioned box is moved out of the normal flow entirely.

Fixed positioning

Fixed positioned elements are moved out of the normal flow entirely - relative to the viewport. This means that they don't move if the page is scrolled. Win/IE5 and Win/IE6 do not support this positioning method at all.