Lädt...

CSS Position

Flow-Lektionen sagten Boxen, wie sie sich in eine Zeile einreihen. position beantwortet eine andere Frage: Wo sitzt diese Box relativ zu ihrem normalen Platz, zu einem Vorfahren oder zum Bildschirm? Meistern Sie die fünf Alltagswerte, bevor Sie zu Stacking oder Float greifen.

Ein Position-Werkzeugkasten

📊 Position auf einen Blick

Wert	Alltagstauglichkeit
`static`	Standard — Offsets wie top/left bringen wenig
`relative`	Ruckt vom normalen Platz; behält seinen Raum; kann absolute-Kinder verankern
`absolute`	Aus dem normalen Fluss entfernt; platziert am nächsten positionierten Vorfahren
`fixed`	Aus dem Fluss; am Viewport fest, während Sie scrollen
`sticky`	Wirkt relativ bis zu einem Scroll-Schwellenwert, dann klebt im Container

Offsets top, right, bottom und left zählen erst, wenn position nicht static ist. Wählen Sie zuerst den Modus, dann feinabstimmen.

Relative — ein höflicher Ruck

relative hält das Element im Fluss. Der ursprüngliche Raum bleibt reserviert. Kleine Offsets eignen sich für optische Feinschliffe — und um ein Elternelement zu markieren, dem absolute-Kinder folgen sollen.

Relative-Ruck

css

.card {
position: relative;
top: 0.25rem;
left: 0.25rem;
padding: 1rem;
border: 1px solid #ddd;
}

Absolute — den Fluss verlassen

absolute zieht die Box aus dem normalen Fluss. Nachbarn schließen die Lücke. Die Platzierung nutzt den nächsten Vorfahren mit position ungleich static — oft ein relative-Elternteil. Ohne diesen Anker kann das Element zu einem größeren Containing Block hochklettern.

Absolute-Badge

css

.badge {
position: absolute;
top: 0.5rem;
right: 0.5rem;
padding: 0.2rem 0.45rem;
font-size: 0.75rem;
background: #0b5fff;
color: #fff;
border-radius: 0.25rem;
}

Absolute ein Zuhause geben

Paaren Sie absolute-Kinder mit einem bewussten Elternteil. Benennen Sie die Beziehung mit Klassen, damit das Layout lesbar bleibt.

Positioniertes Elternteil

css

.media {
position: relative;
padding: 1rem;
border: 1px solid #e5e5e5;
}

.media .badge {
position: absolute;
top: 0.5rem;
right: 0.5rem;
}

Fixed — am Viewport haften

fixed pinnt das Element an den Bildschirm. Scrollen der Seite bewegt es nicht. Nutzen Sie es für ruhige Hinweise oder Toolbars — nicht als Abkürzung für jedes Spaltenlayout.

Fixed-Hinweis

css

.notice {
position: fixed;
bottom: 1rem;
right: 1rem;
padding: 0.75rem 1rem;
background: #111;
color: #fff;
border-radius: 0.5rem;
}

Sticky — erst relativ, dann klebend

sticky bleibt im Fluss, bis Sie einen Scroll-Schwellenwert überschreiten (top ist üblich), und klebt dann in seinem scrollenden Vorfahren. Es braucht Scrollraum und ein sinnvolles Elternteil — sonst wirkt es kaputt.

Sticky-Abschnittslabel

css

.section-label {
position: sticky;
top: 0;
padding: 0.5rem 0;
background: #fff;
border-bottom: 1px solid #eee;
}

Eine ruhige Position-Gewohnheit

Nutzen Sie relative für kleine Rucke und Absolute-Anker. Nutzen Sie absolute für Badges und Overlays in einem bekannten Elternteil. Bewahren Sie fixed und sticky für bewusste Chrome-Elemente. z-index-Stacking und Float-Clearing gehören in eigene Lektionen.

Benannte Position-Rollen

css

.panel {
position: relative;
}

.panel__tag {
position: absolute;
top: 0;
left: 0;
}

Selbst ausprobieren

Rucken Sie eine .card mit position: relative und winzigen top / left-Werten.
Platzieren Sie ein .badge mit absolute in einem relative-.media-Elternteil.
Fügen Sie einen kleinen fixed-Hinweis in eine Ecke ein — scrollen und beobachten Sie das Haften.
Probieren Sie ein sticky-Label mit top: 0 in einem hohen scrollbaren Abschnitt.
Schreiben Sie einen Satz: Wann ist absolute sicherer als fixed?

Häufige Fehler

absolute ohne positioniertes Elternteil und Wundern, warum es weit springt
fixed greifen, um gewöhnliches Seitenlayout zu lösen
Erwarten, dass sticky ohne Scroll-Overflow oder mit widersprüchlichen Vorfahren funktioniert
Diese Lektion wie die Inline-block-Zeilenlektion behandeln (anderer Job)
z-index- oder Float-Rezepte hier abladen statt Platzierungsmodi zu lernen

Zusammenfassung

position steuert Platzierung relativ zu Fluss, Vorfahren oder Viewport
relative ruckelt und verankert; absolute verlässt den Fluss in diesem Anker
fixed pinnt am Viewport; sticky mischt relatives und klebendes Verhalten
Offsets zählen nur, wenn position nicht static ist
Stacking und Float später — meistern Sie zuerst die fünf Modi

🧠 Testen Sie Ihr Wissen

Bereit zum Start

Testen Sie Ihr Wissen

Fordern Sie sich mit diesem interaktiven Quiz heraus und sehen Sie, wie gut Sie das Thema verstehen

❓

Fragen

🎯

70%

Zum Bestehen

♾️

∞

Zeit

🔄

∞

Versuche

📝 Anweisungen

Lesen Sie jede Frage sorgfältig
Wählen Sie die beste Antwort für jede Frage
Sie können das Quiz so oft wiederholen, wie Sie möchten
Ihr Fortschritt wird oben angezeigt

Sprache