Relative Positionierung

(Auszug aus "CSS Kochbuch" von Christopher Schmitt)

Problem

Sie wollen ein Element abhängig von seiner ursprünglichen Position im Dokument platzieren. Anstatt ein Element an seiner Standardposition im Textfluss darzustellen, möchten Sie es um einen bestimmten Wert nach oben, unten, links oder rechts verschieben.

Lösung

Verwenden Sie auch hier die Eigenschaft position. Diesmal verwenden Sie allerdings den Wert relative. Nun können Sie anhand der Werte für top, left, bottom und right festlegen, wie weit das Element von seiner ursprünglichen Position verschoben werden soll.

Mit Hilfe der folgenden CSS-Regel wurde der Inhalt des Absatzes in der nächsten Abbildung mit dem Bild überlagert:

Abbildung: Die relative Positionierung platziert ein Element in Abhängigkeit von seiner ursprünglichen Position im Dokumentenfluss.

Diskussion

Im Gegensatz zur absoluten Positionierung wird das betreffende Element bei relativer Positionierung nicht vom normalen Dokumentenfluss ausgenommen. Stattdessen wird als Ausgangspunkt die tatsächliche Platzierung im Textfluss benutzt. Der Beispielcode weist den Browser an, das Bild von seiner Ursprungsposition um 20 Pixel nach rechts und um 100 Pixel nach unten zu verschieben. Hätten Sie den Wert absolute verwendet, würde das Element stattdessen anhand der Ränder des umgebenden Blocks ausgerichtet werden, ohne dabei auf seinen ursprünglichen Platz Rücksicht zu nehmen.

Siehe auch

Die W3C 2.1-Spezifikation zum Thema relative Positionierung.