Positioning Classes

Bellow is a Demonstration of How Positioning Classes Works

Relative Positioning

The element is positioned relative to its normal position.

Static (default)
Relative
top-1 left-1
Another static
Note how the relative box is offset from its normal position but still takes up space in the flow.
Absolute Positioning

The element is positioned relative to its nearest positioned ancestor.

Parent with position: relative
Absolute
top-1 left-1
The absolute box is positioned 1px from the top and left of its parent (which has position: relative).
Fixed Positioning

The element is positioned relative to the viewport.

Fixed
top-1 left-1
This box stays fixed at the top-left corner of the viewport as you scroll. Try scrolling the page.
Combined Example
Parent with position: relative
Relative
top-1 left-1
Absolute
top-1 left-1
Notice the difference between relative (offset from normal position) and absolute (positioned relative to parent).