position

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.

Steckbrief position

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

Kategorie: Positionierung
Werte: 12
Beispiele: 5
Browser: 5 von 5
E-Mail: 0 von 5
Stand: 15.02.2026

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

12 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

5 Beispiele

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 */
}

<div class="demo">
<div class="box-row">
  <div class="box">Normal</div>
  <div class="box box-shifted">relative (top: 20px, left: 20px)</div>
  <div class="box">Normal</div>
</div>
</div>

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;
}

<div class="demo">
<div class="card">
  <span class="badge">Neu</span>
  <div class="card-title">Produktkarte</div>
  <div class="card-text">Das Badge ist absolut positioniert innerhalb der relativ positionierten Karte.</div>
</div>
</div>

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 */
}

<div class="demo">
<div class="scroll-container">
  <div class="scroll-content">
    <p>Scrolle nach unten, um den Effekt zu sehen. In der Praxis würde der Button mit position: fixed am Viewport kleben.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
    <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </div>
  <button class="fixed-btn">Nach oben</button>
</div>
</div>

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;
}

<div class="demo">
<div class="scroll-area">
  <div class="sticky-header">Abschnitt 1</div>
  <div class="section-content">
    <p>Scrolle nach unten. Die Überschriften bleiben oben kleben.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <p>Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  </div>
  <div class="sticky-header" style="background: #059669;">Abschnitt 2</div>
  <div class="section-content">
    <p>Wenn der nächste sticky-Header ankommt, schiebt er den vorherigen weg.</p>
    <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
    <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.</p>
  </div>
  <div class="sticky-header" style="background: #7c3aed;">Abschnitt 3</div>
  <div class="section-content">
    <p>Dieses Muster eignet sich gut für alphabetische Listen oder Inhaltsverzeichnisse.</p>
    <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit sed do eiusmod.</p>
  </div>
</div>
</div>

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);
}

<div class="demo">
<div class="image-container">
  <span>Bild-Platzhalter</span>
  <div class="overlay">Overlay mit inset: 0</div>
</div>
</div>

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

6 Fehler

01 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.

02 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.

03 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.

04 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.

05 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.

06 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

5 von 5

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.

Chrome

Komplett
Firefox

Komplett
Safari

Komplett
Edge

Komplett
Opera

Komplett

Email-Kompatibilität

0 von 5

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

Apple Mail

Teilweise

relative und absolute werden unterstützt. fixed und sticky nicht
Gmail

Keine

position wird komplett entfernt
Outlook

Keine

Keine Unterstützung für position. Tabellen-basierte Layouts verwenden
Thunderbird

Teilweise

relative und absolute funktionieren grundlegend
Yahoo Mail

Keine

position wird entfernt

einmal die Woche, kostenlos

Neue Artikel und Videos, was sich auf der Lernplattform tut, und ab und zu ein Sonderpreis zum Kursstart. Kurz genug, dass du es auch liest.

Zuletzt verschickt · KW 40

Einmal alles neu, und die Lernplattform ist da

position

Grundlagen

Syntax & Werte

position

top / right / bottom / left

inset (Shorthand)

Beispiele

Barrierefreiheit

Häufige Fehler

Browser-Kompatibilität

Email-Kompatibilität

Newsletter