kulturbanause Blog

Responsive Design, WordPress, Konzeption, HTML, CSS, JS & UX/UI …

Positionierung mit Hilfe der CSS-Eigenschaft position

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.

Workshops und Seminare von kulturbanause

Visual Prototyping, Responsive Design, CSS Grid & Flexbox, WordPress, Adobe XD, HTML & CSS Grundlagen, Website-Optimierung …

Jetzt Frühbucher-Rabatte sichern!

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. Bitte beachtet bei dieser CSS-Eigenschaft den ggf. eingeschränkten Browser-Support.

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

Beispiel anschauen

Jetzt bist du gefragt!

Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freuen wir uns auf deinen Kommentar.

Du kannst diesen Beitrag natürlich auch weiterempfehlen. Wir sind dir für jede Unterstützung dankbar!

Das könnte dich auch interessieren

Kommentar verfassen

Dieser Blog lebt vom Feedback der Besucher! Also los, mach mit!
Bitte habe Verständnis dafür, dass Kommentare die mit dem Inhalt dieses Beitrags nichts zu tun haben, gelöscht werden.