position

Zuletzt aktualisiert am 15. Februar 2026

position bestimmt, wie ein Element im Dokument positioniert wird. Im Normalfall (static) folgt jedes Element dem Dokumentfluss. Mit relative, absolute, fixed oder sticky kannst du Elemente aus diesem Fluss herausnehmen oder verschieben. Die Offset-Eigenschaften top, right, bottom und left bestimmen dann die genaue Position. inset ist das Shorthand für alle vier auf einmal.

Syntax
position: static | relative | absolute | fixed | sticky
Initialwert
static
Vererbt
Nein
Animierbar
Nein

Grundlagen

Ein Element mit position: static wird im normalen Dokumentfluss platziert. Die Offset-Eigenschaften top, right, bottom und left haben bei static keine Wirkung.

relative verschiebt das Element relativ zu seiner normalen Position. Der ursprüngliche Platz im Layout bleibt erhalten, andere Elemente verrutschen nicht. Das ist auch nützlich, um einen Positionierungskontext für absolute positionierte Kinder zu schaffen.

absolute nimmt das Element komplett aus dem Dokumentfluss heraus. Es wird relativ zum nächsten Vorfahren positioniert, der selbst position: relative, absolute, fixed oder sticky hat. Gibt es keinen solchen Vorfahren, wird es relativ zum <html> Element positioniert.

fixed funktioniert wie absolute, aber das Element wird relativ zum Viewport positioniert. Es bleibt beim Scrollen an derselben Stelle. Typische Anwendungsfälle sind fixierte Header oder Zurück-nach-oben-Buttons.

sticky ist eine Mischung aus relative und fixed. Das Element verhält sich normal im Dokumentfluss, bis der Scroll-Bereich einen definierten Punkt erreicht (z.B. top: 0). Dann “klebt” es an dieser Position, bis sein Container aus dem Viewport scrollt.

Syntax & Werte

position

Wert Beschreibung Beispiel
static Element folgt dem normalen Dokumentfluss. Offset-Eigenschaften haben keine Wirkung. (Standard) position: static
relative Element wird relativ zu seiner normalen Position verschoben. Der Platz im Layout bleibt erhalten. position: relative
absolute Element wird aus dem Fluss genommen und relativ zum nächsten positionierten Vorfahren platziert. position: absolute
fixed Element wird relativ zum Viewport positioniert und bleibt beim Scrollen an derselben Stelle. position: fixed
sticky Element verhält sich normal, bis ein Scroll-Schwellenwert erreicht wird. Dann klebt es an der definierten Position. position: sticky

top / right / bottom / left

Wert Beschreibung Beispiel
<length> Fester Abstand in px, em, rem usw. top: 20px
<percentage> Prozentual zum enthaltenden Block. left: 50%
auto Browser bestimmt den Wert automatisch. (Standard) top: auto

inset (Shorthand)

Wert Beschreibung Beispiel
<length> Setzt top, right, bottom und left auf denselben Wert. inset: 0
<top> <right> <bottom> <left> Setzt alle vier Werte einzeln, wie bei margin/padding. inset: 10px 20px 10px 20px
<top-bottom> <left-right> Zwei Werte: vertikal und horizontal. inset: 0 20px
auto Browser bestimmt den Wert automatisch. inset: auto

Beispiele

relative: Element verschieben

Mit position: relative wird das Element visuell verschoben, aber der Platz im Layout bleibt erhalten. Die anderen Elemente verhalten sich so, als wäre das Element noch an seiner ursprünglichen Position.

position: relative
.shifted {
  position: relative;
  top: 20px;   /* 20px nach unten */
  left: 20px;  /* 20px nach rechts */
  /* Der ursprüngliche Platz bleibt erhalten */
}

absolute: Element innerhalb eines Containers positionieren

Ein klassisches Muster: Ein Badge oder Overlay wird absolut innerhalb eines relativ positionierten Containers platziert. Ohne position: relative auf dem Container würde das absolute Element sich am Viewport orientieren.

absolute innerhalb eines relative-Containers
.card {
  position: relative; /* Positionierungskontext */
}

.badge {
  position: absolute;
  top: -8px;
  right: -8px;
}

fixed: Element bleibt beim Scrollen sichtbar

Ein fixed Element wird relativ zum Viewport positioniert und scrollt nicht mit. Hier siehst du einen fixierten Button in der unteren rechten Ecke eines Containers. In der Praxis würde er am Viewport kleben.

fixed: Fixierter Button (simuliert)
.back-to-top {
  position: fixed;
  bottom: 20px;
  right: 20px;
  /* Bleibt beim Scrollen immer sichtbar */
}

sticky: Element klebt beim Scrollen

sticky kombiniert das Beste aus relative und fixed. Das Element scrollt normal mit, bis es den angegebenen Offset erreicht. Dann bleibt es kleben, bis sein Container aus dem Viewport scrollt.

sticky: Klebende Überschriften
.section-header {
  position: sticky;
  top: 0; /* Klebt am oberen Rand */
  background: #1a56db;
  z-index: 1;
}

inset: Shorthand für Overlay

inset: 0 setzt top, right, bottom und left gleichzeitig auf 0. Das ist ideal für Overlays, die den gesamten Container ausfüllen sollen.

inset: 0 für ein Overlay
.container {
  position: relative;
}

.overlay {
  position: absolute;
  inset: 0; /* = top: 0; right: 0; bottom: 0; left: 0; */
  background: rgba(0, 0, 0, 0.6);
}

Barrierefreiheit

Positionierung kann mehrere Barrierefreiheitsprobleme erzeugen, wenn sie nicht richtig eingesetzt wird:

position: fixed und Keyboard Traps: Ein fixiertes Overlay (z.B. Modal, Cookie-Banner) kann eine Tastaturfalle werden, wenn der Fokus nicht richtig gesteuert wird. Wenn ein Nutzer mit der Tab-Taste hinter das Overlay gelangt, ist das verwirrend. Lösung: Verwende Focus Trapping (z.B. mit JavaScript), setze aria-modal="true" auf das Overlay und gib den Fokus beim Schließen zurück zum Auslöser-Element.

position: sticky und verdeckte Fokus-Elemente: Wenn ein Element fokussiert wird, das hinter einem sticky Header liegt, ist es für Tastaturnutzer nicht sichtbar. Verwende scroll-padding-top auf dem scrollbaren Container, damit der Browser genug Platz zum Header lässt:

html {
  scroll-padding-top: 80px; /* Höhe des sticky Headers */
}

position: absolute und überlappende Inhalte: Absolute positionierte Elemente können andere Inhalte überlagern und sie unerreichbar machen. Achte darauf, dass interaktive Elemente nicht versehentlich durch absolute Overlays blockiert werden.

Best Practice: Teste alle fixierten und absoluten Elemente mit der Tab-Taste. Der Fokus sollte niemals in unerreichbare oder unsichtbare Bereiche springen.

Häufige Fehler

  • absolute ohne positionierten Elternteil: Wenn kein Vorfahre position: relative (oder absolute, fixed, sticky) hat, orientiert sich das absolute Element am <html> Element. Setze immer position: relative auf den gewünschten Container.
  • relative auf dem Container vergessen: Das häufigste Problem mit absolute. Du positionierst ein Badge oder Overlay, aber es landet irgendwo am Seitenrand, weil der Container kein position: relative hat.
  • fixed ignoriert Scroll-Container: Ein fixed Element positioniert sich immer am Viewport, nicht am nächsten scrollbaren Container. Wenn du ein Element innerhalb eines scrollbaren Bereichs fixieren willst, brauchst du sticky statt fixed. Ausnahme: Ein Vorfahre mit transform, filter oder will-change erzeugt einen neuen Containing Block für fixed.
  • sticky ohne top oder bottom: position: sticky allein reicht nicht. Du musst mindestens einen Offset angeben (top: 0), damit der Browser weiß, ab wann das Element kleben soll.
  • sticky ohne scrollbaren Container: sticky funktioniert nur innerhalb eines scrollbaren Containers. Wenn der Container nicht scrollbar ist (z.B. weil er groß genug ist), hat sticky keine sichtbare Wirkung. Auch overflow: hidden auf einem Vorfahren kann sticky brechen.
  • top/left ohne position setzen: Die Offset-Eigenschaften haben bei position: static (dem Standard) keine Wirkung. Du musst zuerst position auf einen anderen Wert setzen, bevor top, right, bottom oder left etwas bewirken.

Browser-Kompatibilität

position wird von allen modernen Browsern vollständig unterstützt. position: sticky hat seit 2017 breiten Support. Das inset-Shorthand wird seit 2021 von allen Browsern unterstützt.

ClientUnterstützungHinweise
ChromeKomplett—
FirefoxKomplett—
SafariKomplett—
EdgeKomplett—
OperaKomplett—

Email-Kompatibilität

position ist in HTML-Emails kaum nutzbar. Die meisten Email-Clients entfernen oder ignorieren Positionierungs-Eigenschaften aus Sicherheitsgründen.

ClientUnterstützungHinweise
Apple MailTeilweiserelative und absolute werden unterstützt. fixed und sticky nicht
GmailKeineposition wird komplett entfernt
OutlookKeineKeine Unterstützung für position. Tabellen-basierte Layouts verwenden
ThunderbirdTeilweiserelative und absolute funktionieren grundlegend
Yahoo MailKeineposition wird entfernt

Verwandte Eigenschaften

z-index float-clear display

Bleib auf dem Laufenden

Erhalte neue Inhalte direkt in dein Postfach

Mit der Anmeldung akzeptierst du unsere Datenschutzerklärung. Du kannst dich jederzeit über den Link in den E-Mails wieder abmelden.

Was erwartet dich?

Neue Artikel & Videos

Wenn ich was Neues veröffentliche, erfährst du's hier zuerst.

Plattform & Kurs-Updates

Neue Kurse, Referenz-Updates und gelegentlich Sonderpreise zum Launch.

Einmal die Woche in deinem Postfach

Kurz, auf den Punkt, kein Spam.