CSS Z-index
Die Position-Lektion hat Boxen platziert. z-index beantwortet die nächste Frage: Wenn sich zwei Boxen überlappen, welche sitzt näher am Leser? Denken Sie an Papierbögen auf einem Schreibtisch — höhere Blätter verdecken niedrigere. Lernen Sie die Alltagregeln, bevor Sie riesige Zahlen erfinden.
Ein z-index-Werkzeugkasten
📊 Z-index auf einen Blick
| Idee | Alltagstauglichkeit |
|---|---|
z-index |
Legt die Malreihenfolge überlappender Geschwister im selben Stacking-Kontext fest |
| Zuerst positioniert | Braucht meist position ungleich static (oder bestimmte moderne Layout-Kinder) |
| Höher gewinnt | Größere Ganzzahlen werden später gemalt — sie erscheinen oben |
auto |
Standard — Dokumentreihenfolge und Regeln des Elternkontexts folgen |
| Stacking-Kontext | Ein „Käfig“ — Kinder vergleichen sich untereinander, nicht mit der ganzen Seite |
| Ruhige Skala | Kleine Schritte (1, 2, 10) und benannte Rollen statt 9999-Rennen |
z-index verschiebt eine Box nicht nach links oder rechts. Es ändert nur, wer wen verdeckt, wenn Boxen denselben Bildschirmraum teilen.
Badge über die Karte heben
Geben Sie der Karte ein positioniertes Zuhause, dann heben Sie das Badge mit einem bescheidenen z-index. Geschwisterreihenfolge allein kann reichen, aber eine explizite Ebene macht die Absicht lesbar.
.card {
position: relative;
}
.card__badge {
position: absolute;
top: 0.5rem;
right: 0.5rem;
z-index: 2;
padding: 0.2rem 0.45rem;
background: #0b5fff;
color: #fff;
}
Overlay über der Seite
Modals und Schubladen sitzen meist über dem normalen Inhalt. Koppeln Sie ein positioniertes Overlay mit einer klaren Ebenennummer — und halten Sie Seiteninhalt absichtlich tiefer.
.page {
position: relative;
z-index: 1;
}
.modal {
position: fixed;
inset: 0;
z-index: 10;
background: rgba(0, 0, 0, 0.45);
}
Geschwister vergleichen, nicht die ganze Welt
Unter Geschwistern in einem Kontext gewinnt der höhere z-index. Bei Gleichstand malen spätere DOM-Geschwister typischerweise oben. Beginnen Sie Vergleiche in einem Elternteil, bevor Sie seitenweite Kriege jagen.
.stack {
position: relative;
}
.stack .card-a {
position: absolute;
z-index: 1;
}
.stack .card-b {
position: absolute;
z-index: 2;
}
Stacking-Kontexte käfigen Kinder
Ein Elternteil mit eigenem Stacking-Kontext (z. B. positioniert + z-index) kann Kinder einschließen. Ein Kind mit z-index: 999 springt nicht über ein Geschwister außerhalb dieses Elternteils, wenn der Elternteil selbst tiefer sitzt. Reparieren Sie die Elternebene — blasen Sie nicht nur das Kind auf.
.panel {
position: relative;
z-index: 1;
}
.panel .popup {
position: absolute;
z-index: 999;
}
.toast {
position: fixed;
z-index: 5;
}
Eine ruhige z-index-Gewohnheit
Benennen Sie Rollen (--layer-badge, --layer-modal) oder nutzen Sie eine kleine Skala. Vermeiden Sie 99999, außer beim Debuggen. Merken: Platzierung ist position; Schichtung ist z-index; Float-Clearing wartet auf die nächsten Lektionen.
:root {
--layer-base: 1;
--layer-badge: 2;
--layer-modal: 10;
}
.badge {
position: absolute;
z-index: var(--layer-badge);
}
.modal {
position: fixed;
z-index: var(--layer-modal);
}
Selbst ausprobieren
- Platzieren Sie ein absolutes Badge auf einer relativen Karte und setzen Sie
z-index: 2. - Bauen Sie ein festes Backdrop/Modal mit
z-index: 10über Seiteninhalt bei1. - Geben Sie zwei überlappenden absoluten Geschwistern unterschiedliche z-index-Werte und tauschen Sie sie.
- Verschachteln Sie ein Kind mit hohem z-index in einem Elternteil mit niedrigem — beobachten Sie den Käfig.
- Schreiben Sie eine „9999“ in eine benannte Custom-Property-Skala um.
Häufige Fehler
- Erwarten, dass
z-indexauf einer schlichtenstatic-Box alles neu ordnet - Stacking-Kontexte nur durch Anheben des verschachtelten Kindes bekämpfen
- Mit
99999rennen statt einer lesbaren Skala - Diese Lektion wie Position (Platzierung) oder Display (Boxtyp) behandeln
- z-index nutzen, um Seitenspalten zu erfinden statt Layout-Werkzeuge
Zusammenfassung
z-indexsteuert, wer oben malt, wenn Boxen überlappen- Es braucht meist eine nicht-statische Position (oder besondere Layoutfälle)
- Höhere Werte gewinnen im selben Stacking-Kontext
- Elternkontexte können Kinder käfigen — reparieren Sie die richtige Ebene
- Bevorzugen Sie kleine benannte Skalen; Float kommt in kommenden Lektionen
🧠 Testen Sie Ihr Wissen
Testen Sie Ihr Wissen
Fordern Sie sich mit diesem interaktiven Quiz heraus und sehen Sie, wie gut Sie das Thema verstehen
📝 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