Ausführbare CSS-Docs: CSS Position

Q: Wie positioniere ich ein Element absolut relativ zu seinem Elternelement?

Gib dem Elternelement position: relative; und dem Kind position: absolute; mit Versätzen wie top: 0; right: 0;. Ohne positioniertes Elternelement wird das Kind relativ zur Seite platziert.

Q: Was ist der Unterschied zwischen relativer und absoluter Positionierung?

relative lässt das Element im Fluss und verschiebt nur, wo es gezeichnet wird; sein ursprünglicher Platz bleibt frei. absolute nimmt es aus dem Fluss und platziert es relativ zu seinem positionierten Vorfahren.

Q: Warum funktioniert position: sticky nicht?

Meist aus einem von drei Gründen: Es ist kein top (oder anderer Versatz) gesetzt, ein Vorfahr hat overflow: hidden oder auto und wird zum Scroll-Container, oder das Elternelement des sticky-Elements ist nicht höher als das Element selbst, sodass kein Platz zum Kleben bleibt.

Q: Was ist der Unterschied zwischen fixed und sticky?

fixed wird aus dem Fluss genommen und am Viewport festgeheftet (außer ein Vorfahr hat transform oder filter). sticky bleibt im Fluss und scrollt normal, bis es seinen Versatz erreicht, und klebt dann, solange sein Elternelement noch auf dem Bildschirm ist.

position: absolute in einem Beispiel

Ein absolut positioniertes Element wird aus dem normalen Fluss gehoben und mit top, right, bottom und left platziert. Diese Versätze werden vom nächsten Vorfahren gemessen, dessen position nicht static ist, und deshalb bekommt das Elternelement position: relative:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Absolute inside relative</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .card {
      position: relative;          /* the reference box */
      width: 260px; padding: 20px;
      background: #f3f4f6; border: 2px solid #111827;
    }
    .badge {
      position: absolute;
      top: 8px;
      right: 8px;
      padding: 2px 8px;
      background: #dc2626; color: white; font-size: 12px; border-radius: 999px;
    }
  </style>
</head>
<body>
  <div class="card" id="card">
    <span class="badge" id="badge">New</span>
    <h3>Card title</h3>
    <p>The badge sits 8px from the top and right edges of the card.</p>
  </div>
</body>
</html>

Lösch position: relative aus .card, und das Badge springt nach oben rechts auf der ganzen Seite, weil es keinen positionierten Vorfahren mehr hat. Diese eine Zeile erklärt die meisten Fragen vom Typ „position absolute funktioniert nicht“.

Was du über absolute Elemente wissen solltest:

Sie nehmen keinen Platz ein. Überschrift und Absatz werden angeordnet, als gäbe es das Badge nicht.
Ihre Breite schrumpft auf ihren Inhalt, außer du setzt width oder sowohl left als auch right.
Versätze werden bis zur Padding-Kante des umgebenden Blocks gemessen, innerhalb seines Rahmens.

Die fünf Werte von position

Wert	Im Fluss?	Versätze gemessen von	Typischer Einsatz
`static` (Standard)	Ja	Versätze werden ignoriert	Normale Elemente
`relative`	Ja, sein Platz bleibt erhalten	Seiner eigenen normalen Position	Anker für absolute Kinder, kleine Verschiebungen
`absolute`	Nein	Nächster positionierter Vorfahr (oder die Seite)	Badges, Tooltips, Overlays, Schließen-Buttons
`fixed`	Nein	Dem Viewport	Header, Chat-Buttons, Cookie-Leisten
`sticky`	Ja	Seinem Scroll-Container, sobald es den Versatz erreicht	Tabellenköpfe, Abschnittstitel, Seitenleisten

position: relative

Ein relativ positioniertes Element bleibt, wo es im Fluss war. Versätze verschieben, wo es gezeichnet wird, aber sein ursprünglicher Platz bleibt reserviert, also verschiebt sich nichts drumherum:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Relative</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .row { display: flex; gap: 8px; }
    .row div { width: 80px; padding: 16px 0; text-align: center; background: #bfdbfe; border: 2px solid #2563eb; }
    .row .moved {
      position: relative;
      top: 20px;
      left: 20px;
      background: #fde68a; border-color: #f59e0b;
    }
  </style>
</head>
<body>
  <div class="row">
    <div>1</div>
    <div class="moved" id="moved">2</div>
    <div id="three">3</div>
  </div>
</body>
</html>

Box 2 wird 20px nach unten und 20px nach rechts gezeichnet und überlappt Box 3, aber Box 3 hat sich nicht bewegt: Sie lässt Box 2 weiterhin an ihrer ursprünglichen Stelle Platz. Allein wird relative selten zum Verschieben genutzt; seine Hauptaufgabe ist, die Bezugsbox für absolute Kinder zu sein.

Versätze und inset

top, right, bottom und left nehmen Längen, Prozentwerte (vom umgebenden Block) und auto an. Die Kurzschreibweise inset setzt alle vier in derselben Reihenfolge wie margin:

.overlay {
  position: absolute;
  inset: 0;              /* top: 0; right: 0; bottom: 0; left: 0; */
}
.corner {
  position: absolute;
  inset: auto 16px 16px auto;  /* bottom right corner, 16px in */
}

Setzt du gegenüberliegende Seiten, wird das Element gestreckt: left: 0; right: 0 macht es so breit wie den umgebenden Block. inset: 0 an einem absoluten Kind ist der Standardweg, eine Karte mit einem Overlay zu bedecken.

Zentrieren mit absolute und transform

top: 50%; left: 50% setzt die obere linke Ecke des Elements in die Mitte. translate(-50%, -50%) verschiebt es dann um die Hälfte seiner eigenen Größe zurück:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Absolute centering</title>
  <style>
    .stage { position: relative; height: 180px; background: #e5e7eb; }
    .center {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      padding: 12px 20px;
      background: #2563eb; color: white; font-family: system-ui, sans-serif;
    }
  </style>
</head>
<body>
  <div class="stage" id="stage"><div class="center" id="c">Centered</div></div>
</body>
</html>

Flexbox und Grid zentrieren einfacher, wenn das Element im Fluss bleiben kann; die Seite div zentrieren vergleicht alle Methoden.

position: fixed

Ein fixiertes Element wird relativ zum Viewport platziert und bleibt dort, während die Seite scrollt:

.chat-button {
  position: fixed;
  bottom: 16px;
  right: 16px;
}

Zwei Stolperfallen. Ein fixiertes Element nimmt keinen Platz ein, also verdeckt ein fixierter Header den oberen Teil der Seite, außer du gibst body ein padding-top. Und hat irgendein Vorfahr transform, filter oder perspective, wird dieser Vorfahr statt des Viewports zur Bezugsbox, und das Element scrollt mit ihm.

position: sticky

Ein sticky-Element scrollt normal, bis es seinen Versatz erreicht, und klebt dann dort, bis das Ende seines Elternelements vorbeigescrollt ist. Scroll in der Box unten:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Sticky</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .scroller { height: 220px; overflow-y: auto; border: 2px solid #111827; }
    h3 {
      position: sticky;
      top: 0;
      margin: 0; padding: 8px 12px;
      background: #2563eb; color: white;
    }
    p { margin: 0; padding: 10px 12px; border-bottom: 1px solid #e5e7eb; }
  </style>
</head>
<body>
  <div class="scroller" id="scroller">
    <section>
      <h3>A</h3>
      <p>Adams</p><p>Allen</p><p>Alvarez</p><p>Anderson</p><p>Arnold</p>
    </section>
    <section>
      <h3>B</h3>
      <p>Baker</p><p>Bell</p><p>Brooks</p><p>Brown</p><p>Bryant</p>
    </section>
    <section>
      <h3>C</h3>
      <p>Campbell</p><p>Carter</p><p>Clark</p><p>Collins</p><p>Cooper</p>
    </section>
  </div>
</body>
</html>

Jeder Buchstabe klebt oben an der Scroll-Box, solange sein Abschnitt sichtbar ist, und wird dann vom nächsten weggeschoben, weil ein sticky-Element nie sein Elternelement verlässt.

Wenn sticky nicht klebt, prüf Folgendes:

Kein Versatz. position: sticky bewirkt nichts ohne top, bottom, left oder right.
Ein Vorfahr mit overflow: hidden, auto oder scroll. Er wird zum Scroll-Container, und wenn er gar nicht scrollt, klebt nichts. Nimm overflow: clip, wenn du nur Überstand verstecken willst.
Ein Elternelement, das nicht höher als das sticky-Element ist. Darin ist kein Platz zum Kleben.
Ein Flex- oder Grid-Elternelement, das es streckt. Gib in einer Flex-Zeile der sticky-Seitenleiste align-self: flex-start.

Häufige Fehler

position: relative am Elternelement eines absoluten Elements vergessen.
absolute für das Seitenlayout nutzen. Absolute Elemente ignorieren einander und den Inhalt, also überlappt Text auf kleineren Bildschirmen. Nimm Flexbox oder Grid für das Layout und absolute für kleine Dekorationen.
Versätze an einem statischen Element. top: 10px bewirkt nichts ohne position.
Streit darum, welches Element oben liegt. Überlappende positionierte Elemente werden über z-index sortiert.
Ein fixierter Header verdeckt Inhalt. Gib der Seite Padding oder setz scroll-padding-top, damit Ankerlinks darunter landen.

Häufig gestellte Fragen

Was macht position: absolute?

Es nimmt das Element aus dem normalen Fluss (andere Elemente verhalten sich, als wäre es nicht da) und platziert es mit top, right, bottom und left, gemessen von seinem umgebenden Block: dem nächsten Vorfahren, dessen position nicht static ist.

Wie positioniere ich ein Element absolut relativ zu seinem Elternelement?

Gib dem Elternelement position: relative; und dem Kind position: absolute; mit Versätzen wie top: 0; right: 0;. Ohne positioniertes Elternelement wird das Kind relativ zur Seite platziert.

Was ist der Unterschied zwischen relativer und absoluter Positionierung?

relative lässt das Element im Fluss und verschiebt nur, wo es gezeichnet wird; sein ursprünglicher Platz bleibt frei. absolute nimmt es aus dem Fluss und platziert es relativ zu seinem positionierten Vorfahren.

Warum funktioniert position: sticky nicht?

Meist aus einem von drei Gründen: Es ist kein top (oder anderer Versatz) gesetzt, ein Vorfahr hat overflow: hidden oder auto und wird zum Scroll-Container, oder das Elternelement des sticky-Elements ist nicht höher als das Element selbst, sodass kein Platz zum Kleben bleibt.

Was ist der Unterschied zwischen fixed und sticky?

fixed wird aus dem Fluss genommen und am Viewport festgeheftet (außer ein Vorfahr hat transform oder filter). sticky bleibt im Fluss und scrollt normal, bis es seinen Versatz erreicht, und klebt dann, solange sein Elternelement noch auf dem Bildschirm ist.

Verwandte Konzepte