Position in CSS

Die CSS-Eigenschaft position definiert, wie ein Element im Layout positioniert wird. Sie steuert, ob ein Element im Dokumentfluss bleibt, ihn verlässt oder sich an einem Bezugspunkt orientiert.

Die 5 Position-Werte

Die folgenden Werte bestimmen das Verhalten der Positionierung.

  • static Standardverhalten im Dokumentfluss
  • absolute Positioniert ein Element relativ zum nächsten positionierten Elternelement
  • relative Verschiebt ein Element relativ zu seiner ursprünglichen Position
  • fixed Positioniert ein Element relativ zum Viewport
  • sticky Bleibt im Dokumentfluss und wird beim Scrollen fixiert

Eigenschaften

Diese Eigenschaften wirken nur bei positionierten Elementen (nicht bei static). Die Werte von top, right, bottom und left können auch negativ sein.

  • topAbstand von oben
  • rightAbstand von rechts
  • bottomAbstand von unten
  • leftAbstand von links
  • z-indexStapelreihenfolge (Tiefe)

1. position: static

Der Standardwert. Elemente bleiben im normalen Dokumentfluss.

See the Pen Position static by Intensivstation (@intensivstation) on CodePen. 

position: static; /* Standard, muss nicht angegeben werden */

Wichtige Eigenschaften

  • Elemente bleiben im normalen Dokumentfluss
  • top, right, bottom und left haben keine Wirkung
  • z-index hat keine Wirkung

2. position: absolute

Das Element wird aus dem Dokumentfluss entfernt und relativ zum nächsten positionierten Elternelement positioniert. Fehlt ein solches, dient der Viewport als Bezugspunkt.

See the Pen Position absolute by Intensivstation (@intensivstation) on CodePen. 

#box-pink {
  position: absolute; 
  top: 300px; 
  left: 400px; 
}

Hinweis: Negative Werte sind erlaubt und werden häufig genutzt, um Elemente außerhalb des sichtbaren Bereichs zu positionieren und anschließend zu animieren.

Verschachtelte absolute Positionierung

Absolut positionierte Elemente werden aus dem Dokumentfluss entfernt. Beide Boxen sind position: absolute.

Die pinke Box wird relativ zum initialen Bezugspunkt positioniert, da kein übergeordnetes Element positioniert ist. Die graue Box hingegen bezieht sich auf die pinke Box, da diese ebenfalls positioniert ist.

See the Pen Nested absolute positions by Intensivstation (@intensivstation) on CodePen. 

#box-pink {
  position: absolute; 
  top: 150px; 
  left: 150px; 
}
#box-grau {
  position: absolute; 
  top: -50px; 
  right: -50px; 
}

Z-index

Steuert die Stapelreihenfolge überlappender Elemente. Elemente mit einem höheren Wert werden vor Elementen mit einem niedrigeren Wert dargestellt.

See the Pen Position absolute & z–index by Intensivstation (@intensivstation) on CodePen. 

#box-gruen { z-index:10;}
#box-pink { z-index:20;}
#box-grau { z-index:30;}

Wichtige Regeln

  • z-index wirkt nur bei positionierten Elementen
  • Höhere Werte werden vor niedrigeren Werten dargestellt
  • Negative Werte sind möglich, z. B. z-index: -1
  • Standardwert: auto

3. position: relative

Das Element wird relativ zu seiner ursprünglichen Position verschoben. Der ursprüngliche Platz im Dokumentfluss bleibt erhalten.

See the Pen Position relative by Intensivstation (@intensivstation) on CodePen. 

.box {
    position: relative;
    top: -50px; /* 50px nach oben */   
    left: 50px; /* 50px nach rechts */
}

Wichtige Eigenschaften

  • Das Element wird visuell verschoben, bleibt jedoch im Dokumentfluss
  • Andere Elemente reagieren nicht auf die Verschiebung
  • top, right, bottom und left wirken
  • z-index wirkt
  • Dient häufig als Referenzpunkt für absolut positionierte Kindelemente

Absolute Positionierung mit relativem Bezugspunkt

See the Pen Untitled by Intensivstation (@intensivstation) on CodePen.

Relativer Container als Bezugspunkt für absolute Elemente

#container { position: relative;}
.brand{ position: absolute; }

Kombination von relative, absolute und static

In diesem Beispiel startet der Text unten neben dem Bild. Wenn zusätzlicher Inhalt hinzukommt, wächst der Text nicht nach unten, sondern nach oben. Dadurch wird sichtbar, dass Positionierung nicht nur die Lage eines Elements bestimmt, sondern auch die Richtung, in die sich sein Inhalt ausdehnt. CodePen Beispiel

4. position: fixed

Das Element wird aus dem Dokumentfluss entfernt und am Viewport fixiert. Es bleibt auch beim Scrollen an derselben Stelle sichtbar.

See the Pen Fixed Menu by Intensivstation (@intensivstation) on CodePen. 

.nav {
  width: 250px; 
  position: fixed;
  }
#content {
  margin:0 0 0 250px;
  }

Das viel modernere Beispiel findest du auf CodePen

Wichtige Eigenschaften

  • Element wird aus dem Dokumentfluss entfernt
  • Positioniert relativ zum Viewport (Browserfenster)
  • Scrollt nicht mit der Seite
  • Ignoriert positionierte Eltern-Elemente
  • Häufig Verwendung für Navigation, Buttons, Overlays

Beispiel: CodePen - Fixed Footer & multi Hintergrundbilder

5. position: sticky

Hybrid aus relative und fixed. Das Element bleibt zunächst im Dokumentfluss und verhält sich wie relative. Erreicht es beim Scrollen einen definierten Abstand (z. B. top), bleibt es innerhalb seines Containers an dieser Position haften.

Scroll nach unten...

Ich bin sticky! (top: 10px)

Mehr Content...

Noch mehr Content...

Der sticky-Box folgt beim Scrollen...

...bis zum Ende des Containers

.sticky-container {
    height: 300px;
    overflow: auto; /* macht den Container zum Scroll-Bereich */
}

.sticky-element {
    position: sticky;
    top: 10px; /* Klebt 10px vom oberen Rand */
}

Wichtige Eigenschaften

  • Verhält sich zunächst wie relative
  • Haftet beim Scrollen an der definierten Position (z. B. top)
  • Benötigt mindestens einen Offset-Wert (top, bottom, left oder right)
  • Bleibt innerhalb seines Containers

Einsatz: Sticky wird häufig für Navigationsleisten, Abschnittsüberschriften oder Filterleisten verwendet, die beim Scrollen sichtbar bleiben sollen, ohne den Dokumentfluss zu verlassen.

Wichtig: Sticky funktioniert nur innerhalb seines Scroll-Containers und benötigt einen definierten Offset-Wert (z. B. top). Ein übergeordnetes Element mit overflow kann das Verhalten beeinflussen.

Ein realistischeres Beispiel: sticky Abschnittstitel, die beim Scrollen oben haften bleiben, bis der nächste Abschnitt sie ablöst.

See the Pen Sticky Beispiel by Intensivstation (@intensivstation) on CodePen.

Praktische Beispiele

1. Overlay / Modal

Ein Overlay legt sich über die ganze Seite, um den Fokus auf ein Modal-Fenster zu lenken. position: fixed sorgt dafür, dass der Hintergrund unabhängig vom Scroll-Stand die gesamte Seite abdeckt.

See the Pen Overlay / Modal by Intensivstation (@intensivstation) on CodePen. 

.overlay {
    position: fixed; /* oder absolute */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: 1000;
}

2. Badge / Notification

Ein kleines Badge (z. B. Anzahl ungelesener Nachrichten) sitzt über der Ecke eines Icons. Der Icon-Container braucht position: relative, damit sich das Badge (position: absolute) an ihm orientiert – nicht an der ganzen Seite.

See the Pen Badge / Notification by Intensivstation (@intensivstation) on CodePen. 

.icon-container {
    position: relative;
}
.badge {
    position: absolute;
    top: -8px;
    right: -8px;
    background: red;
    color: white;
    border-radius: 50%;
    padding: 4px 8px;
    font-size: 12px;
}

3. Tooltip

See the Pen Tooltip by Intensivstation (@intensivstation) on CodePen. 

.tooltip-trigger {
    position: relative;
}

.tooltip {
    position: absolute;
    bottom: 100%; /* Über dem Element */
    left: 50%;
    transform: translateX(-50%); /* Horizontal zentriert */
    margin-bottom: 10px;
}

/* Pfeil */
.tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: #333;
}

4. Sticky Footer

Der Footer ist absolute positioniert, aber relativ zu einem Container, der im Dokumentfluss bleibt und mit dem Inhalt wächst. Bei wenig Inhalt sitzt der Footer unten am Viewport; wird der Inhalt länger, wächst der Container und der Footer rutscht automatisch ans Ende.

Beispiel auf CodePen

html {
    height: 100%;
}
body {
    position: relative;
    min-height: 100%;
}
#content {
    padding-bottom: 100px; /* Platz für den Footer */
}
footer {
    width: 100%;
    position: absolute;
    left: 0;
    bottom: 0;
}

Wichtig: Die 100px Padding sind kein Design-Feature, sondern eine Sicherheitszone. Ändert sich die Footer-Höhe, muss dieser Wert mitgezogen werden.

Position vs Flexbox/Grid

position eignet sich für gezielte Platzierung einzelner Elemente. Flexbox und Grid sind primär Layout-Werkzeuge für die Anordnung von Inhalt.

Wann Position verwenden?

  • Overlays und Modals
  • Tooltips, Dropdowns und Popovers
  • Badges und kleine UI-Markierungen
  • Fixed Headers/Footers
  • Absolute Positionierung innerhalb eines Containers

Wann Flexbox/Grid verwenden?

  • Seitenlayouts und Content-Anordnung
  • Navigationen und Layout-Strukturen
  • Card-Layouts und Komponenten-Raster
  • Responsive Layouts
  • Abstände, Ausrichtung und Verteilung von Elementen

Tipp: In der Praxis wird häufig Flex/Grid für das Grundlayout eingesetzt und position für überlagernde oder punktgenau platzierte Elemente.

Next Level: CSS Anchor Positioning

Klassisches position: absolute löst nur Eltern-Kind-Beziehungen im DOM – das Tooltip-Beispiel oben braucht deshalb zwingend einen position: relative-Wrapper um Trigger und Tooltip. CSS Anchor Positioning (Baseline seit 2026, Chrome/Firefox/Safari) löst dieses Limit auf: ein Element kann sich an einem beliebigen anderen Element im DOM orientieren – egal wo im Markup es liegt.

.trigger {
    anchor-name: --my-anchor;
}

.tooltip {
    position: absolute;
    position-anchor: --my-anchor;
    top: anchor(bottom);   /* direkt unter dem Trigger */
    left: anchor(center);  /* horizontal zentriert */
}

Der Trigger bekommt mit anchor-name einen selbst gewählten Namen (wie eine CSS-Variable). Das Tooltip verweist mit position-anchor darauf und kann über die anchor()-Funktion direkt auf dessen Kanten oder Mittelpunkt zugreifen.

Kombiniert mit nth-child

Bei mehreren Trigger-Elementen (z. B. einer Reihe von Icons) braucht jedes Trigger-Tooltip-Paar einen eigenen, eindeutigen anchor-name – Namen dürfen nicht doppelt vergeben werden. :nth-child() adressiert dabei jedes Paar einzeln:

.icon:nth-child(1) { anchor-name: --icon-1; }
.icon:nth-child(2) { anchor-name: --icon-2; }
.icon:nth-child(3) { anchor-name: --icon-3; }

.tooltip:nth-child(1) { position-anchor: --icon-1; }
.tooltip:nth-child(2) { position-anchor: --icon-2; }
.tooltip:nth-child(3) { position-anchor: --icon-3; }

Wichtig: Noch kein Ersatz für position: relative/absolute im Alltag – für die meisten Fälle (Badges, einfache Dropdowns innerhalb eines Containers) reicht die klassische Lösung völlig. Anchor Positioning lohnt sich vor allem, wenn Trigger und positioniertes Element im DOM weit auseinanderliegen müssen (z. B. wegen overflow: hidden eines Elternelements).

Kurz gesagt

  • static – Standardverhalten im Dokumentfluss
  • relative – Verschiebung relativ zur ursprünglichen Position, Platz bleibt erhalten
  • absolute – Aus dem Dokumentfluss entfernt, bezieht sich auf das nächste positionierte Elternelement
  • fixed – Aus dem Dokumentfluss entfernt, am Viewport fixiert und scrollt nicht mit
  • sticky – Bleibt im Dokumentfluss und haftet beim Scrollen innerhalb seines Containers
  • top, right, bottom, left und z-index wirken nur bei positionierten Elementen
  • Ein übergeordnetes Element mit position: relative dient als Bezugspunkt für absolute Kindelemente
  • inset ist die Kurzform für top, right, bottom und left