CSS-Malreihenfolge

Normalerweise schaltet mein Gehirn ab, wenn ich Begriffe wie „Malreihenfolge“ oder „Stacking Context“ höre, und meine Augen werden glasig. Nicht, dass mein Gehirn nicht sowieso öfter abschaltet, aber das ist ein anderes Thema für ein anderes Mal.

Martin Robinson von Igalia geht auf diese Konzepte ein und verwendet ein Beispiel, das ziemlich leicht zu verstehen ist, selbst für mich. Er beginnt mit zwei sich überlappenden Feldern mit negativen Rändern.

<div class="blue box">1</div>
<div class="green box">2</div>

Dann führt er ein drittes Feld ein, das ein Kind des grünen Feldes ist. Dem grünen Feld wird ein z-index von -1 zugewiesen. Wie zu erwarten, stapeln sich sowohl das grüne als auch das gelbe Feld unter dem blauen Feld.

<div class="blue box">0</div>
<div class="green box" style="position: relative; z-index: -1;">-1
  <div class="yellow box">-1</div>
</div>

Hier begann mein Gehirn zu schmelzen. Wenn der z-index des grünen Feldes bei -1 bleibt, wir seinem Kind aber einen massiven Wert zuweisen, sagen wir 1.000, sieht alles ... genau gleich aus.

<div class="blue box">0</div>
<div class="green box" style="position: relative; z-index: -1;">-1
  <div class="yellow box" style="position: relative; z-index: 1000;">1000</div>
</div>

Ich bin sicher, viele von Ihnen können bereits erraten (oder wissen es einfach), warum das blaue Feld oben bleibt, obwohl die Änderung des z-index des gelben Feldes impliziert, dass es stattdessen oben sein sollte, aber ich tat es sicher nicht. Martin fand die technische Antwort in der CSS2-Spezifikation, tief vergraben in Anhang E, den er dankenswerterweise verlinkt hat – sonst hätte ich ihn sicher nie gefunden.

Wir lernen aus Anhang E, dass ein Stacking Context eine atomar gemalte Sammlung von Seitenelementen ist. Was bedeutet das? Vereinfacht ausgedrückt bedeutet es, dass Dinge innerhalb eines Stacking Contexts zusammen als Einheit gemalt werden und dass Elemente außerhalb des Stacking Contexts niemals dazwischen gemalt werden. Ein aktiver z-index ist eine der Situationen in CSS, die die Erstellung eines Stacking Contexts auslösen. Gibt es eine Möglichkeit, unser obiges Beispiel so anzupassen, dass das dritte Element zum selben Stacking Context wie die ersten beiden Elemente gehört? Die Antwort ist, dass wir es aus dem vom zweiten Element erstellten Stacking Context entfernen müssen.

Also, ja. Solange das gelbe Feld ein Kind des grünen Feldes ist, bilden die beiden einen Stacking Context, an dem das blaue Feld keinen Anteil hat. Damit Gelb über Blau kommt, muss es aus Grüns Stacking Context entfernt werden.

Das ist der Kern von Martins Beitrag, aber er geht noch weiter und es lohnt sich, dorthin zu gehen. Wenn Sie das tun, werden Sie sehen, wie die Stapelreihenfolge zu einigen echten CSS-Tricks führt.

Es ist nicht das erste Mal, dass wir Beweise dafür verlinkt haben, dass z-index kein ebenes Spielfeld ist, daher werde ich versuchen, mir das für das nächste (und unvermeidliche) Mal, wenn ich mit dem Stapeln von Elementen kämpfe, einzuprägen.

Direkter Link →