Positionierung mit der CSS <code>position</code>-Eigenschaft

Jeder Webdesigner sollte wissen, wie Elemente auf einer Website gezielt positioniert werden können. Neben der Floating-Technik und modernen CSS-Layoutmodellen wie Flexbox oder dem Grid Layout Module spielt hier die CSS-Eigenschaft position eine entscheidende Rolle. In diesem Beitrag erklären wir die verschiedenen Werte der position-Eigenschaft anhand leicht nachvollziehbarer Beispiele.

position: static;

position: static ist der Standardwert, den jedes HTML-Element automatisch besitzt. Das HTML-Element befindet sich folglich an seiner Standardposition innerhalb des sog. Dokumentflusses. Die später beschriebenen Eigenschaften left, right, top & bottom, sowie der z-index haben bei einem Element mit position: static keinerlei Wirkung. Man spricht deshalb auch von einem nicht positionierten Element.

Der Wert static wird normalerweise dann verwendet, wenn man ein Element zuvor mit einer der folgenden position-Werte positioniert hat und den Standardzustand wiederherstellen möchte.

position: relative;

Wenn ihr einem Element position:relativ zuweist, positioniert es sich relativ zu seiner Standard-Position, also jener Stelle auf der Website, die es ohne Positionierungsangaben einnehmen würde. Wir können das Element mithilfe der CSS-Eigenschaften left, right, top & bottom von dort aus verschieben.

.element {
  position: relative;
  left: 100px;
  top: 100px; 
}

Andere Elemente berücksichtigen bei ihrer Positionierung weiterhin die ursprüngliche Position des verschobenen Elements, nicht die sichtbare.

Beispiel anschauen

position: absolute;

Wenn ihr ein Element mit position:absolute; positioniert, orientiert es sich am nächst höheren Eltern-Element, das nicht den Standardwert position: static trägt. Gibt es ein solches Element nicht, orientiert es sich am HTML-Element body. Das absolut positionierte Element wird darüber hinaus dem Dokumentfluss entnommen. Andere Elementen rutschen daher in den freigewordenen Platz.

.element {
  position: absolute;
  bottom: 0;
  right: 0; 
}

Beispiel anschauen

position: fixed;

Wenn ihr ein Element mit position: fixed; positioniert, orientiert es sich am Browserfenster. Wie bei position:absolute; wird es dem Dokumentfluss entnommen, was dazu führt, dass nachfolgende Elemente in den freigewordenen Platz rutschen. Zusätzlich sorgt position: fixed dafür, dass das Element beim Scrollen an Ort und Stelle bleibt. So kann man z. B. eine Navigationsleiste für den Nutzer permanent sichtbar machen.

.element {
  position: fixed;
  top: 0; 
left: 0;
}

Beispiel anschauen

position: sticky;

Die Positionierungsart position: sticky ist ein Hybrid der zwei Eigenschaften position: relative und position: fixed. Das Element scrollt solange mit, bis es mit einer seiner Kanten eine der über top, right, bottom oder left angegebenen Koordinaten erreicht. Üblicherweise wird die top-Eigenschaft verwendet, da wird im Regelfall eine Website von oben nach unten scrollen.

Sobald der Wert erreicht ist, verhält sich das Element als wäre es mit position:fixed; positioniert worden. Es bleibt also beim Scrollen stehen.

.element {
  position: sticky;
  top: 0;
}

Beispiel anschauen

Wenn position: sticky; vermeintlich nicht funktioniert, prüft einmal ob ein Elternelement des Objekts overflow:hidden; zugewiesen bekommen hat. Das kann die Sticky-Funktion beeinträchtigen.

Geschrieben von kulturbanause Team

Beiträge bei denen das kulturbanause-Team als Autor angegeben ist, wurden von mehreren Personen in Zusammenarbeit geschrieben. Wir nutzen diesen Blog als öffentliches Archiv und um Web Designern bei ihren alltäglichen Problemen zu helfen. Neben diesem Blog bieten wir noch weitere Trainings-Möglichkeiten wie Schulungen, Bücher oder Video-Trainings an. Detaillierte Informationen findet ihr hier.