CSS-Kurs / z-index und Stapelkontexte

z-index steuert das Stapeln innerhalb des relevanten Stapelkontexts und weist nicht jedem Element eine globale Tiefe zu. Ein Kind mit hohem z-index kann hinter einem Element in einem höheren übergeordneten Kontext bleiben, und z-index kann das Overflow-Clipping nicht rückgängig machen.

Positionierung von der Stapelreihenfolge trennen

Um die Überlappungsreihenfolge zu vergleichen, müssen die beiden Elemente tatsächlich denselben Bildschirmbereich einnehmen. Wenn sie völlig links und rechts oder oben und unten liegen, wird das Ändern des z-index keinen Unterschied machen. Überprüfen Sie zuerst die rechteckige Position des Elements in den Entwicklertools und bestimmen Sie, ob Überlappungsbereiche vorhanden sind. Für die Positionierungsstandards von überlappenden Elementen überprüfen Sie die Raum- und Koordinatenstandards von CSS Position: relative, absolute, fixed und sticky.

Die Position bestimmt den Koordinatenstandard und die Teilnahme am Fluss, und der z-index bestimmt die Vorder- und Rückseite bei Überlappungen. Das Ändern der Koordinaten mit top und das Ändern der Reihenfolge mit z-index sind unterschiedliche Aufgaben. Das folgende Beispiel fixiert die Positionen des Abzeichens und der Karte und ändert dann nur den z-index des übergeordneten Elements, sodass Sie die beiden Funktionen vergleichen können, ohne sie zu vermischen.

z-index kann auf positionierte Elemente wie relative·absolute angewendet werden und kann für Flex-Elemente und Grid-Elemente verwendet werden, selbst bei position: static. Wenn Sie nur Zahlen zu gewöhnlichen allgemeingültigen Flussblöcken zuweisen und Effekte erwarten, können die Anwendungsbedingungen nicht erfüllt sein. Sie können die Bedeutung des Ziels und des Werts in der Beschreibung des z-index in MDN nachprüfen.

Vergleichen Sie Stapelkontexte als Gruppen

Ein Stapelkontext gruppiert seine Nachkommen für externe Stapelvergleiche. Wenn das linke übergeordnete Element z-index: 1 hat und die rechte Karte z-index: 2, konkurriert ein untergeordnetes Abzeichen mit z-index: 9999 innerhalb des linken Kontexts nicht direkt mit der rechten Karte. Die übergeordnete Gruppe bleibt darunter.

Left parent context: z-index 1
└ Child badge: z-index 9999
Right card context: z-index 2

Outside, compare parent 1 and card 2.

Wenn das linke übergeordnete Element auf z-index: 3 angehoben wird, wird sein ganzer Kontext über die rechte Karte bei 2 gesetzt. Das untergeordnete Abzeichen behält seinen eigenen Wert von 9999, wird jedoch in der Überlappung sichtbar. Vorfahren- und Nachkommenzahlen werden nicht addiert, um einen globalen Wert wie 10000 zu erzeugen. Siehe MDN: Stapelkontext.

Identifizieren Sie Deklarationen, die Kontexte erstellen

Die obige Tabelle ist eine Liste häufig auftretender Bedingungen und keine Liste aller Erstellungsbedingungen. Sie müssen zwischen Fällen unterscheiden, in denen nur relative angegeben ist und z-index auf auto steht, und Fällen, in denen z-index: 0 für relative angegeben ist. Wenn sich die Überlappung geändert hat, prüfen Sie nicht nur die Zahl, sondern auch die neue Opazität oder Transformation, die dem Vorfahren hinzugefügt wurde.

Im gleichen Kontext können Sie Vorder- und Rückseite mithilfe der z-index-Zahl des Elements vergleichen, das die Anwendungsbedingungen erfüllt. Da die gesamte CSS-Zeichenreihenfolge jedoch mehrere Ebenen hat, einschließlich negativer Ebenen, normaler Fluss und positionierter Elemente, sollten Sie auto für alle Elemente nicht als gleich 0 behandeln oder die gesamte Seitenreihenfolge nur anhand von Zahlen berechnen. Die Lernpraxis beschränkt die Bedingungen auf positive Zahlen und expliziten übergeordneten Kontext.

Vergleichen Sie die z-index-Werte von Eltern- und Kind-Elementen

Speichern Sie den folgenden Code als stacking-context.html und öffnen Sie ihn. Das Abzeichen ist 80-144px von oben platziert, und die Karte rechts befindet sich im Bereich von 110-230px, mit einer vertikalen Überlappung von 34px. Die linken und rechten Positionen verwenden ein Verhältnis zur Breite des übergeordneten Elements, um die Überlappung auf mobilen Geräten beizubehalten. Eltern- und Elemente werden als Border-Box berechnet und so konfiguriert, dass unnötiger Überlauf außerhalb des Containers verhindert wird.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>stacking-context.html</title>
  <style>
* { box-sizing: border-box; }
body { margin: 16px; font: 16px/1.6 sans-serif; color: #243447; }
h1 { font-size: 24px; } h2 { font-size: 20px; margin-top: 32px; }
a { color: #145f8f; } a:focus-visible { outline: 3px solid #b4470b; outline-offset: 3px; }
.scene { position: relative; width: min(100%, 520px); height: 300px; background: #f1f4f7; }
 .left { position: absolute; z-index: 1; left: 0; top: 20px; width: 60%; height: 180px;
 padding: 16px; background: #ffe3b5; }
 .badge { position: absolute; z-index: 9999; left: 70%; top: 60px; width: 50%; height: 64px;
 padding: 8px; background: #f5a7cc; }
 .right { position: absolute; z-index: 2; left: 50%; top: 110px; width: 45%; height: 120px;
 padding: 12px; background: #9cd4f2; }
 .raised .left { z-index: 3; }
  </style>
</head>
<body>
<h1>Child and parent z-index values</h1><h2>Parent: 1; right card: 2</h2><div class="scene original"><div class="left">Left parent<div class="badge">Child badge<br>9999</div></div><div class="right">Right card<br>z-index: 2</div></div><h2>Parent: 3; right card: 2</h2><div class="scene raised"><div class="left">Left parent<div class="badge">Child badge<br>9999</div></div><div class="right">Right card<br>z-index: 2</div></div>
</body>
</html>

Im ersten Abschnitt wird das überlappende pinke Abzeichen von der blauen Karte verdeckt, und im zweiten Abschnitt ist das pinke Abzeichen oben auf der blauen Karte sichtbar. Der einzige Unterschied zwischen den beiden Zonen liegt bei 1 und 3 des linken Elternteils. Das folgende erläuternde Diagramm zeigt die beiden Zustände mit denselben relativen Koordinaten; es ist kein Browser-Screenshot.

1. Erhöhen Sie nur die .badge-Nummer im ersten Abschnitt auf 99999. Die Beziehung zwischen Parent 1 und Card 2 bleibt erhalten, sodass der überlappende Teil weiterhin von der Karte abgedeckt wird. Stellen Sie die Nummer wieder auf 9999 zurück.
2. Ergänzen Sie die Regel .original .left { z-index: 3; }. Das Badge liegt danach vor der Karte, ohne dass sich seine Koordinaten ändern. Nach der Bestätigung entfernen Sie die hinzugefügte Regel.
3. Ändern Sie im ursprünglichen ersten Abschnitt nur den z-index von .left auf auto. In diesem Beispiel, ohne andere Erstellungseigenschaften, erstellt das linke Elternteil keinen separaten Kontext, sodass der Kontext des Abzeichens mit der äußeren Karte verglichen wird. Stellen Sie sicher, dass das Abzeichen vorne sichtbar ist, und setzen Sie es wieder auf 1 zurück.
4. Vergrößern oder Verkleinern Sie den Bildschirm, um sicherzustellen, dass Abzeichen und Karte weiterhin überlappen. Da numerische Änderungen nicht sichtbar sind, wenn die Koordinaten getrennt sind, müssen Vergleiche durchgeführt werden, während der Überlappungsbereich beibehalten wird.

Unterscheiden Sie Überlauf-Beschneidung von Stapelung.

Wenn der Vorfahre den Inhalt mit overflow: hidden abschneidet, können die außerhalb seiner Grenzen liegenden Teile nicht wieder sichtbar gemacht werden nur mit einem hohen z-index. Wenn es in der Reihenfolge vorn liegt, aber nicht sichtbar ist, müssen Sie feststellen, ob es von einem anderen Element verdeckt wird oder an einer Vorfahren-Grenze abgeschnitten ist. Speichern Sie den folgenden Code als stacking-clip.html und führen Sie ihn aus. Selbst wenn Sie den z-index erhöhen, überprüfen Sie, ob er am Eltern-Grenzwert abgeschnitten ist, prüfen Sie die Abschneidebedingungen für Überlauf, lange Zeichenfolgen und Auslassungszeichen.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>stacking-clip.html</title>
  <style>
* { box-sizing: border-box; }
body { margin: 16px; font: 16px/1.6 sans-serif; color: #243447; }
h1 { font-size: 24px; } h2 { font-size: 20px; margin-top: 32px; }
a { color: #145f8f; } a:focus-visible { outline: 3px solid #b4470b; outline-offset: 3px; }
.frame { position: relative; width: min(100%, 260px); height: 100px; overflow: hidden;
 border: 2px solid #789; background: #e8f5de; }
 .popup { position: absolute; z-index: 9999; left: 80%; top: 24px; width: 90px; height: 60px;
 padding: 8px; background: #f5a7cc; }
  </style>
</head>
<body>
<h1>A box that stays clipped at a higher z-index</h1><div class="frame">Parent boundary<div class="popup">Badge<br>9999</div></div><p>The right side of the badge extends beyond its parent's boundary.</p>
</body>
</html>

1. Stellen Sie sicher, dass die rechte Seite des Abzeichens am Elternrand abgeschnitten ist. Selbst wenn Sie den z-index auf 99999 ändern, erscheint der abgeschnittene Teil nicht. Setzen Sie die Zahl wieder auf 9999 zurück.
2. Ändern Sie nur overflow von .frame zu visible. Andere Koordinaten und Zahlen bleiben gleich, aber der Bereich außerhalb der Grenzen ist sichtbar. Nach dem Vergleich wieder auf hidden zurücksetzen.

Auf echten Bildschirmen kann das Entfernen von Overflow andere Zwecke beeinflussen, wie Scrollen und abgerundete Ecken. Bestimmen Sie zuerst, ob das Abschneiden beabsichtigt ist, und wenn das Popup außerhalb der Grenzen erscheinen soll, verschieben Sie die Struktur aus dem abschneidenden Vorfahren oder erwägen Sie eine separate Anzeigemethode, falls erforderlich. Ändern Sie nicht den Overflow aller Eltern auf einmal, nur weil das Menü dadurch verborgen wird.

Befolgen Sie eine diagnostische Sequenz

1. Prüfen Sie, ob das Element existiert und nicht durch display, visibility oder opacity verborgen wird.
2. Überprüfen Sie die rechteckigen Positionen der beiden Elemente, um zu sehen, ob ein tatsächlicher Überlappungsbereich vorhanden ist.
3. Untersuchen Sie das Zielelement und anschließend seine Vorfahren auf Deklarationen, die einen Stapelkontext erzeugen. Bestimmen Sie, welchen gemeinsamen übergeordneten Kontext die konkurrierenden Kontexte gegenübergestellt werden.
4. Entscheiden Sie, ob der Zahlenwert des Kindes oder des übergeordneten Kontexts geändert werden muss. Überprüfen Sie auch die betroffenen Geschwisterelemente und passen Sie die Werte nur innerhalb des notwendigen Bereichs an.
5. Wenn Sie es auch nach Änderung der Reihenfolge nicht sehen, prüfen Sie Trunkierung wie Überlauf·clip und andere Koordinatenstandards. Nach Abschluss des Vergleichs werden die vorübergehend geänderten Werte auf ihre ursprünglichen Werte zurückgesetzt.

Der z-index eines normalen Elements sollte nicht als Mittel betrachtet werden, eine separate Anzeigeebene, wie z. B. einen Dialog auf der obersten Ebene, einfach durch Erhöhen der Zahl zu überwinden. Bei der Fehlersuche an Standardkarten und Abzeichen ist es wichtig, zunächst den tatsächlichen übergeordneten Kontext und die Trunkierung zu verstehen. Anstatt einfach die Zahlen immer weiter zu erhöhen, können Sie die beabsichtigte Reihenfolge auch mit kleinen Werten konfigurieren, indem Sie prüfen, welche Gruppen verglichen werden.