Positionierung mit der CSS <code>position</code>-Eigenschaft
In diesem Artikel erklären wir die CSS-Eigenschaft »position« mit den Werten static, relative, absolute, fixed und sticky.

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.
Schulungen von kulturbanause
Intensive Trainings mit hohem Praxisbezug. Z. B.: Coding for Designers oder Seminar: CSS für Webanwendungen
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.
Feedback & Ergänzungen – Schreibe einen Kommentar
Website-Projekte mit kulturbanause
Wir wissen wovon wir reden. Wir realisieren komplette Projekte oder unterstützen punktuell in den Bereichen Design, Development, Strategy und Content.
Übersicht Kompetenzen →Schulungen von kulturbanause
Wir bieten Seminare und Workshops zu den Themen Konzept, Design und Development. Immer up-to-date, praxisnah, kurzweilig und mit dem notwendigen Blick über den Tellerrand.
Übersicht Schulungsthemen →