CSS Positioning

Static Position

box with number 1

Element is in normal flow. This is the default value.

Relative Position

box with number 2

Element is in normal flow but is offset based on provided value.

The values top, right, left and bottom can be used to offset element.

Absolute Position

box with number 3

The element is removed from the normal flow.

Its final position is relative to the positioned parent or ancestor

and is determined by the values of top, right, bottom, and left.

Fixed Position

box with number 4

The element is removed from the normal document flow.

The final position is relative to the viewport and determined by the values of top, right, bottom, and left.