Positionierung

{position:static}

Der Standardwert; wird im CSS keine Angabe zur Position gemacht, gilt der Wert "static".
In diesem Beispiel stapeln sich die drei Divs wie üblich übereinander.


{position:relative}

Wird ein Element auf position:relative oder position:absolute (s.u.) gesetzt, lässt es sich per
left: (Wert), Bezugspunkt: obere linke Ecke
right: (Wert), Bezugspunkt: obere rechte Ecke
top: (Wert), Bezugspunkt oben
bottom: (Wert), Bezugspunkt unten
an die richtige Position bringen.

Beispiel:

Das mittlere, grüne Div ist auf "position:relative" gesetzt und per "left:200px" verschoben worden.
Das nachfolgende Div bleibt an seiner Position, so als ob sich das grüne Div noch an seiner alten Position befinden würde.

relativ

{position:absolute}

Hier ist das grüne Div auf "position:absolute" gesetzt, das nachfolgende Div rutscht nach oben.
Das grüne Div ist durch seine absolute Positionierung aus dem Fluss genommen worden, das blaue Div rutscht hoch.

absolut

Das absolut positionierte Div überlagert jetzt die beiden anderen Divs:

absolute

Bei der relativen Positionierung ist der Bezugspunkt die linke obere Ecke der ursprünglichen Position, bei der absoluten Positionierung die linke obere Ecke des Browserfensters.