Positionierung mit der CSS position-Eigenschaft
Von: Jonas Mit der CSS-Eigenschaft »position« wird gesteuert, wo Elemente auf einer Website dargestellt werden, ob sie von anderen Objekten abhängig sind und wie diese reagieren.
Wenn ihr euch mit der Gestaltung und Umsetzung von Websites beschäftigt, solltet ihr 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.
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;}
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; }
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;}
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.
