4 Gründe, warum Ihr Z-Index nicht funktioniert (und wie Sie ihn beheben können)

Z-Index ist eine CSS-Eigenschaft, mit der Sie Elemente in Ebenen übereinander positionieren können. Es ist super nützlich und ehrlich gesagt ein sehr wichtiges Werkzeug, um zu wissen, wie man CSS verwendet.

Leider ist der Z-Index eine dieser Eigenschaften, die sich nicht immer intuitiv verhalten. Zunächst scheint es einfach zu sein - eine höhere Z-Index-Nummer bedeutet, dass sich das Element über Elementen mit niedrigeren Z-Index-Nummern befindet. Es gibt jedoch einige zusätzliche Regeln, die die Dinge komplizierter machen. Und Sie können Probleme nicht immer beheben, indem Sie den Z-Index auf 999999 setzen!

In diesem Artikel werden vier der häufigsten Gründe, aus denen Z-Index bei Ihnen nicht funktioniert, sowie die genauen Möglichkeiten zur Behebung des Problems ausführlich erläutert.

Wir werden einige aktuelle Codebeispiele durchgehen und Probleme lösen. Nachdem Sie diesen Artikel gelesen haben, können Sie diese häufigen Z-Index-Fallstricke verstehen und vermeiden!

Sehen wir uns den ersten Grund an:

1. Elemente im selben Stapelkontext werden in der Reihenfolge ihres Auftretens angezeigt, wobei letztere Elemente über früheren Elementen liegen.

In unserem ersten Beispiel haben wir ein relativ einfaches Layout, das drei Hauptelemente enthält:

  • Ein Bild von einer Katze
  • Ein weißer Block mit Text
  • Ein weiteres Bild der gleichen Katze

Hier ist das HTML-Markup dafür:

Meow meow meow ...

In diesem Layout soll der weiße Textblock idealerweise auf beiden Katzen liegen.

Um dies zu erreichen, haben wir dem CSS für beide Katzenbilder einige negative Ränder hinzugefügt, sodass sie den weißen Block etwas überlappen:

.cat-top {
   Rand-unten: -110px;
}
.cat-bottom {
   schweben rechts;
   Rand oben: -120px;
}

Es sieht jedoch so aus:

Die erste Katze befindet sich tatsächlich unter dem weißen Inhaltsblock, so wie wir es wollen. Aber das zweite Katzenbild befindet sich oben auf dem Block!

Warum passiert dies?

Der Grund für dieses Verhalten liegt in der natürlichen Stapelreihenfolge auf der Webseite. Diese Richtlinien legen grundsätzlich fest, welche Elemente oben und welche unten angezeigt werden.

Auch wenn für Elemente kein Z-Index festgelegt wurde, gibt es einen Reim und einen Grund dafür, zu welchem ​​Z-Index die Elemente gehören.

In unserem Fall hat keines der Elemente einen Z-Indexwert. Ihre Stapelreihenfolge wird also von ihrer Erscheinungsreihenfolge bestimmt. Nach dieser Regel werden Elemente, die später im Markup erscheinen, über den Elementen angezeigt, die vor ihnen stehen.

(Weitere Informationen zu den Richtlinien für die Stapelreihenfolge finden Sie im Mozilla Developer Network hier.)

In unserem Beispiel mit den Katzen und dem weißen Block befolgen sie diese Regel. Deshalb befindet sich die erste Katze unter dem weißen Blockelement und der weiße Block unter der zweiten Katze.

Okay, die Stapelreihenfolge ist in Ordnung und gut, aber wie können wir das CSS so korrigieren, dass sich die zweite Katze unter dem weißen Block befindet?

Schauen wir uns den zweiten Grund an:

2. Für das Element ist keine Position festgelegt

Eine der anderen Richtlinien, die die Stapelreihenfolge bestimmen, ist, ob die Position eines Elements festgelegt ist oder nicht.

Um die Position für ein Element festzulegen, fügen Sie die CSS-Positionseigenschaft zu einer anderen als statischen Position hinzu, z. B. relativ oder absolut. (Sie können mehr darüber in diesem Artikel lesen, den ich geschrieben habe.)

Gemäß dieser Regel werden positionierte Elemente über nicht positionierten Elementen angezeigt.

Wenn Sie also den weißen Block auf Position: relativ setzen und die beiden Katzenelemente nicht positionieren, wird der weiße Block in der Stapelreihenfolge auf die Katzen gelegt.

So wird es aussehen - Sie können auch mit dem obigen Codepen herumspielen.

Woohoo!

Als nächstes wollen wir die untere Katze mit der Eigenschaft transform auf den Kopf stellen. Auf diese Weise befinden sich beide Katzen unter dem weißen Block, wobei nur die Köpfe herausragen.

Dies kann jedoch zu mehr Verwirrung im Zusammenhang mit dem Z-Index führen. Wir werden das Problem und die Lösung im nächsten Teil ansprechen.

3. Wenn Sie einige CSS-Eigenschaften wie Deckkraft oder Transformation festlegen, wird das Element in einen neuen Stapelkontext versetzt.

Wie wir gerade erwähnt haben, wollen wir die unterste Katze auf den Kopf stellen. Um dies zu erreichen, fügen wir die Transformation hinzu: Drehen (180 Grad).

.cat-bottom {
   schweben rechts;
   Rand oben: -120px;
   transformieren: drehen (180 Grad);
}

Dies führt jedoch dazu, dass die unterste Katze wieder über dem weißen Block angezeigt wird!

Was zum Teufel ist hier los?

Dieses Problem tritt möglicherweise nicht häufig auf, aber ein weiterer Aspekt der Stapelreihenfolge besteht darin, dass einige CSS-Eigenschaften wie Transformation oder Deckkraft das Element in einen eigenen, neuen Stapelkontext versetzen.

Dies bedeutet, dass das Hinzufügen der Transformation zum Element .cat-bottom dazu führt, dass sie sich so verhält, als hätte sie einen Z-Index von 0. Auch wenn ihre Position oder ihr Z-Index überhaupt nicht festgelegt sind! (W3.org hat einige informative, aber ziemlich dichte Dokumentationen darüber, wie dies mit der Opazitätseigenschaft funktioniert.)

Denken Sie daran, wir haben dem weißen Block nie einen Z-Indexwert hinzugefügt, sondern nur die Position: relativ. Dies war genug, um den weißen Block auf die nicht positionierten Katzen zu legen.

Da sich das .bottom-cat-Element jedoch so verhält, als wäre es relativ mit dem Z-Index: 0 positioniert, wurde es bei der Transformation über dem weißen Block positioniert.

Die Lösung besteht darin, die Position zu setzen: relativ und den Z-Index explizit auf mindestens den weißen Block zu setzen. Sie können noch einen Schritt weiter gehen und die Position festlegen: relativ und einen niedrigeren Z-Index für die Cat-Elemente, nur um besonders sicher zu sein.

.content__block {
   Position: relativ;
   Z-Index: 2;
}
.cat-top, .cat-bottom {
   Position: relativ; Z-Index: 1;
}

Meiner Meinung nach wird dies die meisten, wenn nicht alle grundlegenden Z-Index-Probleme lösen.

Kommen wir nun zu unserem letzten Grund, warum Ihr Z-Index nicht funktioniert. Dies ist etwas komplexer, da es sich um übergeordnete und untergeordnete Elemente handelt.

4. Das Element befindet sich aufgrund der Z-Index-Ebene des übergeordneten Elements in einem niedrigeren Stapelkontext

Schauen wir uns dazu unser Codebeispiel an:

Wir haben Folgendes: Eine einfache Webseite mit regulärem Inhalt und eine pinkfarbene Registerkarte mit der Aufschrift "Feedback senden", die über dem Inhalt positioniert ist.

Wenn Sie dann auf das Foto der Katze klicken, wird ein modales Fenster mit einer transparenten grauen Hintergrundüberlagerung geöffnet.

Selbst wenn das modale Fenster geöffnet ist, befindet sich die seitliche Registerkarte immer noch über der grauen Überlagerung. Wir möchten, dass das Overlay über alles angezeigt wird, einschließlich der seitlichen Registerkarte.

Sehen wir uns das CSS für die betreffenden Elemente an:

.content {
   Position: relativ;
   Z-Index: 1;
}
.modal {
   Position: feststehend;
   Z-Index: 100;
}
.side-tab {
   Position: feststehend;
   Z-Index: 5;
}

Alle Elemente haben eine festgelegte Position, und die Seitenregisterkarte hat einen Z-Index von 5, wodurch sie über dem Inhaltselement mit dem Z-Index 1 positioniert wird.

Dann hat das Modal den Z-Index: 100, der es am Z-Index: 5 oben auf die Seitenlasche setzen sollte. Stattdessen befindet sich die Modal-Überlagerung unter der Seitenlasche.

Warum passiert dies?

Zuvor haben wir einige Faktoren angesprochen, die in den Stapelkontext eingehen, z. B. ob für das Element die Position und die Reihenfolge im Markup festgelegt wurde.

Ein weiterer Aspekt des Stapelkontexts besteht darin, dass ein untergeordnetes Element auf den Stapelkontext seines übergeordneten Elements beschränkt ist.

Schauen wir uns die drei Elemente genauer an.

Hier ist der Markup, den wir haben:

    

Anhand des Markups können wir erkennen, dass der Inhalt und die Seitenregisterkartenelemente gleichgeordnet sind. Das heißt, sie befinden sich auf derselben Ebene im Markup (dies unterscheidet sich von der Ebene des Z-Index). Und das Modal ist ein untergeordnetes Element des Inhaltselements.

Da sich das Modal im Inhaltselement befindet, wirkt sich der Z-Index von 100 nur im übergeordneten Element, dem Inhaltselement, aus. Wenn es beispielsweise andere untergeordnete Elemente gibt, die dem Modal untergeordnet sind, werden sie durch ihre Z-Index-Werte übereinander oder darunter angeordnet.

Der Z-Index-Wert dieser untergeordneten Elemente hat jedoch keine Bedeutung außerhalb des übergeordneten Elements, da für das übergeordnete Inhaltselement der Z-Index auf 1 festgelegt ist.

Daher können seine untergeordneten Elemente, einschließlich des Modals, diese Z-Index-Ebene nicht verlassen.

(Sie können sich an diese leicht deprimierende Metapher erinnern: Ein Kind kann von seinen Eltern eingeschränkt werden und sich nicht von ihnen befreien.)

Es gibt einige Lösungen für dieses Problem:

Lösung: Verschieben Sie das Modal außerhalb des übergeordneten Inhalts und in den Hauptstapelkontext der Seite.

Das korrigierte Markup würde dann so aussehen:

Nun ist das modale Element ein Geschwisterelement für die beiden anderen. Dies versetzt alle drei Elemente in denselben Stapelkontext wie sie, sodass sich nun alle Z-Index-Ebenen gegenseitig beeinflussen.

In diesem neuen Stapelkontext werden die Elemente in der folgenden Reihenfolge von oben nach unten angezeigt:

  • Modal (Z-Index: 100)
  • Seitenlasche (Z-Index: 5)
  • Inhalt (Z-Index: 1)

Alternative Lösung: Entfernen Sie die Positionierung aus dem Inhalt, damit der Z-Index des Modals nicht eingeschränkt wird.

Wenn Sie das Markup nicht ändern möchten oder können, können Sie dieses Problem beheben, indem Sie die Positionseinstellung aus dem Inhaltselement entfernen:

.content {
   // Keine Position festgelegt
}
.modal {
   Position: absolut;
   Z-Index: 100;
}
.side-tab {
   Position: absolut;
   Z-Index: 5;
}

Da das Inhaltselement jetzt nicht mehr positioniert ist, wird der Z-Indexwert des Modals nicht mehr eingeschränkt. Das offene Modal wird also aufgrund seines höheren Z-Index von 100 über dem Seitenlaschenelement positioniert.

Während dies funktioniert, würde ich persönlich die erste Lösung anstreben.

Wenn Sie das Inhaltselement in Zukunft aus irgendeinem Grund positionieren müssen, wird dies die Reihenfolge des Modals im Stapelkontext erneut einschränken.

In Summe

Ich hoffe, dass Sie dieses Tutorial hilfreich fanden! Zusammenfassend lässt sich sagen, dass die meisten Probleme mit dem Z-Index mit den folgenden beiden Richtlinien gelöst werden können:

  1. Überprüfen Sie, ob die Position der Elemente und die Z-Index-Nummern in der richtigen Reihenfolge festgelegt sind.
  2. Stellen Sie sicher, dass Sie keine übergeordneten Elemente haben, die die Z-Index-Ebene ihrer untergeordneten Elemente begrenzen.

Ressourcen:

  • W3.org: Transparenz: die Eigenschaft „Deckkraft“
  • W3.org: Festlegen der Stapelebene
  • Mozilla Developer Network: Der Stacking-Kontext
  • PhilipWalton.com: Was Ihnen niemand über den Z-Index gesagt hat
  • Smashing Magazine: Die Z-Index-CSS-Eigenschaft

Mehr wollen?

Weitere Tutorials finden Sie in meinem Blog unter coder-coder.com.
Melden Sie sich hier an, um E-Mails über neue Artikel zu erhalten.
Mach mit über 25.000 anderen - Folge @thecodercoder auf Instagram.