Positionen

Positionierung ist eines der grundlegendsten, aber auch mächtigsten Konzepte in CSS. Sie bestimmt, wie Elemente auf einer Webseite platziert werden und wie sie sich zueinander verhalten. CSS bietet mehrere Positionierungsschemata, die ich Ihnen im Detail vorstellen werde.

Die CSS position Eigenschaft

Die position Eigenschaft kann folgende Werte annehmen:
• static (Standardwert)
• relative
• absolute
• fixed
• sticky

Zusätzlich werden oft die Eigenschaften top, right, bottom, left und z-index verwendet, um die genaue Position zu steuern.

Static Positionierung (Standard)

.element {
  position: static;
}

.element {
  position: static;
}

Eigenschaften:
• Standard-Positionierung im normalen Dokumentenfluss
• Ignoriert top, right, bottom, left und z-index
• Elemente werden in der Reihenfolge angezeigt, wie sie im HTML erscheinen

Beispiel:

<div class="box static">Box 1</div>
<div class="box static">Box 2</div>

<div class="box static">Box 1</div>
<div class="box static">Box 2</div>

Beide Boxen erscheinen untereinander im normalen Fluss.

Relative Positionierung

Eigenschaften:
• Element wird relativ zu seiner normalen Position verschoben
• Behält seinen Platz im normalen Fluss (andere Elemente verhalten sich so, als wäre es nicht verschoben)
• Akzeptiert top, right, bottom, left und z-index

Beispiel:

<div class="box">Normal</div>
<div class="box relative">Relativ positioniert</div>
<div class="box">Normal</div>

<div class="box">Normal</div>
<div class="box relative">Relativ positioniert</div>
<div class="box">Normal</div>

.relative {
  position: relative;
  top: 20px;
  left: 50px;
  background-color: lightblue;
}

.relative {
  position: relative;
  top: 20px;
  left: 50px;
  background-color: lightblue;
}

Die mittlere Box wird nach rechts und unten verschoben, aber der Platz, den sie normalerweise einnehmen würde, bleibt frei.

Absolute Positionierung

.element {
  position: absolute;
  top: 0;
  right: 0;
}

.element {
  position: absolute;
  top: 0;
  right: 0;
}

Eigenschaften:
• Element wird aus dem normalen Fluss entfernt
• Positioniert sich relativ zum nächsten positionierten Vorfahre (mit position ≠ static)
• Wenn kein positionierter Vorfahre existiert, wird relativ zum initialen containing block (meist das viewport) positioniert
• Akzeptiert top, right, bottom, left und z-index
• Hat keinen Einfluss auf die Position anderer Elemente

Beispiel:

<div class="container">
  <div class="box absolute">Absolut</div>
</div>

<div class="container">
  <div class="box absolute">Absolut</div>
</div>

.container {
  position: relative;
  height: 200px;
  width: 200px;
  border: 1px solid black;
}

.absolute {
  position: absolute;
  bottom: 10px;
  right: 10px;
  background-color: lightcoral;
}

.container {
  position: relative;
  height: 200px;
  width: 200px;
  border: 1px solid black;
}

.absolute {
  position: absolute;
  bottom: 10px;
  right: 10px;
  background-color: lightcoral;
}

Die Box wird in der rechten unteren Ecke des Containers positioniert.

Fixed Positionierung

.element {
  position: fixed;
  bottom: 20px;
  right: 20px;
}

.element {
  position: fixed;
  bottom: 20px;
  right: 20px;
}

Eigenschaften:
• Ähnlich wie absolute, aber immer relativ zum Viewport
• Bleibt an derselben Position beim Scrollen
• Nützlich für modale Fenster, Navigationsleisten oder Chat-Buttons
• Akzeptiert top, right, bottom, left und z-index

Beispiel:

<div class="fixed-box">Fixed Box</div>

<div class="fixed-box">Fixed Box</div>

.fixed-box {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 100px;
  height: 100px;
  background-color: lightgreen;
}

.fixed-box {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 100px;
  height: 100px;
  background-color: lightgreen;
}

Die Box bleibt beim Scrollen immer in der rechten unteren Ecke des Bildschirms.

Sticky Positionierung

.element {
  position: sticky;
  top: 0;
}

.element {
  position: sticky;
  top: 0;
}

Eigenschaften:
• Kombination aus relative und fixed
• Verhält sich zunächst wie relative, bis ein bestimmter Scroll-Punkt erreicht ist, dann verhält es sich wie fixed
• Muss mindestens einen top, right, bottom oder left Wert haben
• Nützlich für Tabellenüberschriften oder Navigationsleisten

Beispiel:

<div class="sticky-header">Sticky Header</div>
<p>Langer Inhalt...</p>

<div class="sticky-header">Sticky Header</div>
<p>Langer Inhalt...</p>

.sticky-header {
  position: sticky;
  top: 0;
  background-color: lightyellow;
  padding: 10px;
}

.sticky-header {
  position: sticky;
  top: 0;
  background-color: lightyellow;
  padding: 10px;
}

Der Header bleibt am oberen Bildschirmrand, sobald man nach unten scrollt.

Z-Index und Stacking Kontext

Eigenschaften:
• Bestimmt die Stapelreihenfolge von positionierten Elementen (≠ static)
• Höhere Werte werden über niedrigeren Werten angezeigt
• Erzeugt einen neuen stacking context
• Nur wirksam bei positionierten Elementen

Beispiel:

<div class="box box1">Box 1</div>
<div class="box box2">Box 2</div>

<div class="box box1">Box 1</div>
<div class="box box2">Box 2</div>

.box {
  position: absolute;
  width: 100px;
  height: 100px;
}

.box1 {
  top: 50px;
  left: 50px;
  background-color: red;
  z-index: 1;
}

.box2 {
  top: 80px;
  left: 80px;
  background-color: blue;
  z-index: 2;
}

.box {
  position: absolute;
  width: 100px;
  height: 100px;
}

.box1 {
  top: 50px;
  left: 50px;
  background-color: red;
  z-index: 1;
}

.box2 {
  top: 80px;
  left: 80px;
  background-color: blue;
  z-index: 2;
}

Die blaue Box (höherer z-index) überdeckt teilweise die rote Box.

Praxisbeispiel: Overlay mit Modal

<div class="content">Hauptinhalt</div>
<div class="overlay"></div>
<div class="modal">Modal Fenster</div>

<div class="content">Hauptinhalt</div>
<div class="overlay"></div>
<div class="modal">Modal Fenster</div>

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.5);
  z-index: 100;
}

.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 300px;
  padding: 20px;
  background-color: white;
  z-index: 101;
}

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.5);
  z-index: 100;
}

.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 300px;
  padding: 20px;
  background-color: white;
  z-index: 101;
}

In diesem Beispiel:
• Das Overlay bedeckt den gesamten Bildschirm mit halbtransparentem Schwarz
• Das Modal ist zentriert und erscheint über dem Overlay (höherer z-index)
• Beide Elemente bleiben beim Scrollen fixiert

Zusammenfassung: Positionierungsarten

Static-Positionierung ist der Standardwert. Elemente folgen dem normalen Dokumentenfluss und ignorieren Versatz-Eigenschaften wie top oder left. Sie werden einfach in der Reihenfolge angezeigt, wie sie im HTML-Code erscheinen.

Relative Positionierung verschiebt ein Element relativ zu seiner normalen Position, lässt aber den ursprünglichen Platz im Layout frei. Andere Elemente verhalten sich so, als wäre das verschobene Element noch an seiner Originalposition. Diese Art eignet sich für kleine Anpassungen oder um einen Bezugspunkt für absolut positionierte Kindelemente zu schaffen.

Absolute Positionierung entfernt das Element komplett aus dem normalen Fluss. Es positioniert sich relativ zum nächsten Vorfahrelement mit einer Positionierung außer static. Wenn kein solcher existiert, dient der Viewport als Bezug. Absolut positionierte Elemente beeinflussen andere Elemente nicht und eignen sich für präzise Platzierungen wie Tooltips oder Overlays.

Fixed Positionierung ähnelt der absoluten Positionierung, bezieht sich aber immer auf den Viewport. Die Elemente bleiben beim Scrollen an derselben Stelle sichtbar, was sie ideal für permanente Navigationselemente oder Chat-Widgets macht.

Sticky Positionierung kombiniert relative und fixed Verhalten. Das Element verhält sich zunächst normal, bleibt aber beim Erreichen eines definierten Scrollpunkts (z.B. top: 0) am Viewport „kleben“. Dies ist besonders nützlich für Tabellenüberschriften oder Navigationsleisten, die beim Scrollen sichtbar bleiben sollen.

Der z-index bestimmt die Stapelreihenfolge bei überlappenden Elementen. Höhere Werte erscheinen vor niedrigeren. Wichtig ist, dass z-index nur bei positionierten Elementen (nicht static) wirkt und neue Stacking-Kontexte erzeugt.

In der Praxis werden diese Positionierungstechniken oft kombiniert – etwa ein relativ positionierter Container mit absolut positionierten Kindelementen oder ein fixed Header mit sticky Subnavigation. Die Wahl der richtigen Methode hängt vom gewünschten Layoutverhalten und der Scroll-Interaktion ab.