CSS Position sticky static relative absolute fixed ratgeber

Wie Sie Elemente mit CSS-Position richtig positionieren

Ole Mai
Inhaltsverzeichnis
Dauer: 2 Min.
Anleitung
Niveau: 1/5

CSS Positions sind eine grundlegende Eigenschaft im Webdesign, die es ermöglicht, Elemente genau dort auf der Seite zu positionieren, wo man sie haben möchte. In diesem Beitrag werden wir uns die verschiedenen CSS Positionstypen ansehen und wie man sie verwendet.

Es gibt fünf verschiedene Positionstypen in CSS: static, relative, absolute, fixed und sticky. Jeder dieser Typen hat seine eigenen Eigenschaften und Verwendungszwecke.

Position: static;

Die static Positionierung ist die Standardposition in CSS und bedeutet, dass das Element an seiner ursprünglichen Position auf der Seite bleibt. Diese Positionierung wird normalerweise nicht explizit angegeben, da sie bereits die Standardposition ist.

.element {
  position: static;
}

Position: relative;

Bei der relative Positionierung wird das Element relativ zu seiner ursprünglichen Position verschoben. Man kann die Positionierung mit top, bottom, left und right anpassen. Wenn man beispielsweise top: 10px angibt, wird das Element 10 Pixel unterhalb seiner ursprünglichen Position angezeigt.

.element {
  position: relative;
  top: 10px;
}

Position: absolute;

Die absolute Positionierung positioniert das Element relativ zum nächsten übergeordneten Element, das nicht static positioniert ist. Wenn kein solches Element vorhanden ist, wird das Element relativ zur Seite positioniert. Diese Positionierung kann mit top, bottom, left und right angepasst werden.

.parent {
  position: relative;
}

.element {
  position: absolute;
  top: 10px;
  left: 20px;
}

Position: fixed;

Eine Positionierung mit fixed bewirkt, dass das Element immer an derselben Stelle auf der Seite bleibt, auch wenn man die Seite scrollt. Diese Positionierung kann ebenfalls mit top, bottom, left und right angepasst werden.

.element {
  position: fixed;
  top: 10px;
  left: 20px;
}

Position: sticky;

Die Positionierung mit sticky ist eine Mischung aus relative und fixed. Das Element wird relativ zum normalen Dokumenten-Flow positioniert, bis es eine bestimmte Position erreicht. An diesem Punkt wird das Element fixed positioniert und bleibt an seiner Stelle, auch wenn man die Seite scrollt.

.element {
  position: sticky;
  top: 10px;
}

Fazit

Durch das Verständnis der verschiedenen Positionstypen und ihrer Verwendungszwecke kann man eine genauere Kontrolle über das Layout der Webseite erlangen. CSS Positions sind eine wichtige Eigenschaft, um Elemente auf der Seite genau dort zu positionieren, wo man sie haben möchte.

Ole Mai
Ole Mai
Ole beschäftigt sich mit der Prozessoptimierung bei Gegenfeld und fokussiert sich auf die Themen Marketing und Webentwicklung.

News per E-Mail

Hochwertige Lerninhalte
Ratgeber und Kurse – direkt ins Postfach.
Gegenfeld Newsletter

Keine Beratungsleistung

Die Inhalte auf dieser Website stellen keine Finanz-, Steuer- oder Rechtsberatung dar und ersetzen diese auch nicht.

Bitte wenden Sie sich bei Fragen an einen entsprechenden Finanz- oder Steuerberater oder Fachanwalt.