Positionierung mit CSS

Bei CSS gibt es 4 verschiedene Positionierungsarten, die gerade für Anfänger oftmals verwirrend sind. Daher versuche ich, in folgendem Artikel etwas Klarheit in die verschiedenen Positionierungsarten zu bringen.

static

static ist der position-Standardwert. Wird also kein position-Wert vergeben, wird automatisch static genutzt. Das Element wird dabei im normalen Fluss der Elemente eingefügt.

relative

Möchte man ein Element, ausgehend von seiner eigentlichen Position, verschieben, dann hilft der Wert relative weiter. Alle Angaben (top, right, bottom oder left) werden dann von der ursprünglichen Elementposition aus gewertet. Der ursprüngliche Platz, an dem das Element angezeigt worden wäre (ohne Verschieben durch top, right, bottom oder left) bleibt dabei bestehen.

absolute

Mit Hilfe des absolute-Werts kann ein Element abhängig von einem anderen Element positioniert werden. Das Element, dass dabei als Grundlage für die Position gilt, ist das nächsthöhere umschließende Element, das nicht mit dem Wert static positioniert ist. Falls kein von static abweichend positioniertes Vorfahrenelement existiert, bezieht sich die Positionierung auf das body-Element.

fixed

Soll ein Element auf fixiert bleiben, so hilft der Wert fixed weiter. Dabei wird das Element am Browserfenster ("Viewport") ausgerichtet. Fixierte Elemente haben die Eigenschafft, dass sie auch beim Scrollen der Website an der gleichen Stelle verharren.