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

Beispiel: CodePen

Praktische Beispiele

1. Overlay / Modal

.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

.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

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

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.

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