4 Gründe, warum Ihr Z-Index nicht funktioniert (und wie man ihn behebt) - Coder Coder

Dieser Beitrag wurde ursprünglich auf Coder-Coder.com veröffentlicht.

Z-Index ist eine CSS-Eigenschaft, mit der Sie Elemente in Ebenen übereinander positionieren können. Es ist sehr 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 das Element über Elementen mit niedrigeren Z-Index-Nummern liegt. Es gibt jedoch einige zusätzliche Regeln, die die Dinge komplizierter machen. Und Sie können nicht immer Abhilfe schaffen, indem Sie den Z-Index auf 999999 setzen! ?

In diesem Artikel werden vier der häufigsten Gründe, warum Z-Index für Sie nicht funktioniert, und genau, wie Sie das Problem beheben können, ausführlich erläutert.

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

Schauen wir uns den ersten Grund an:

1. Elemente im selben Stapelkontext werden in der Reihenfolge ihres Erscheinungsbilds 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 einer Katze
  • Ein weißer Block mit Text
  • Ein weiteres Bild derselben Katze

Hier ist das HTML-Markup dafür:

 Meow meow meow... 

In diesem Layout möchten wir idealerweise, dass der weiße Textblock über beiden Katzen liegt.

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

.cat-top { margin-bottom: -110px; } .cat-bottom { float: right; margin-top: -120px; }

Es sieht jedoch so aus:

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

Warum passiert das?

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

Auch wenn für Elemente der Z-Index nicht festgelegt ist, gibt es einen Reim und einen Grund, warum Elemente oben stehen.

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

(Weitere Richtlinien zur Stapelreihenfolge finden Sie hier im Mozilla Developer Network.)

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

Ok, die Stapelreihenfolge ist gut und schön, aber wie können wir das CSS so reparieren, dass sich die zweite Katze unter dem weißen Block befindet?

Schauen wir uns den zweiten Grund an:

2. Die Position des Elements ist nicht 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- positionEigenschaft etwas anderem als static, wie relativeoder hinzu absolute. (Sie können mehr darüber in diesem Artikel lesen, den ich geschrieben habe.)

Nach dieser Regel werden positionierte Elemente über nicht positionierten Elementen angezeigt.

position: relativeWenn Sie also den weißen Block so einstellen , dass die beiden Katzenelemente nicht positioniert sind, wird der weiße Block in der Stapelreihenfolge oben auf den Katzen platziert.

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

Woohoo!

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

Dies kann jedoch zu mehr z-indexVerwirrung führen. Wir werden das Problem und die Lösung im nächsten Teil ansprechen.

3. Durch Festlegen einiger CSS-Eigenschaften wie Deckkraft oder Transformation wird das Element in einen neuen Stapelkontext versetzt.

Wie wir gerade erwähnt haben, wollen wir die untere Katze auf den Kopf stellen. Um dies zu erreichen, werden wir hinzufügen transform: rotate(180deg).

.cat-bottom { float: right; margin-top: -120px; transform: rotate(180deg); }

Dies führt jedoch dazu, dass die untere Katze wieder oben auf dem weißen Block angezeigt wird!

Was zum Teufel ist hier los?

Möglicherweise tritt dieses Problem nicht häufig auf, aber ein weiterer Aspekt der Stapelreihenfolge besteht darin, dass einige CSS-Eigenschaften das Element mögen transformoder opacityin einen eigenen neuen Stapelkontext stellen.

Dies bedeutet, dass das Hinzufügen des Elements transformzum .cat-bottomElement dazu führt, dass es sich so verhält, als hätte es eine z-indexvon 0. Auch wenn es keine positionoder überhaupt keine hat z-index! (W3.org hat einige informative, aber ziemlich dichte Dokumentationen darüber, wie dies mit der opacityEigenschaft funktioniert )

Denken Sie daran, dass wir z-indexdem weißen Block niemals nur einen Wert hinzugefügt haben position: relative. Dies war genug, um den weißen Block auf den nicht positionierten Katzen zu positionieren.

Da sich das .bottom-catElement jedoch so verhält, als wäre es relativ positioniert z-index: 0, hat es durch die Transformation auf dem weißen Block positioniert.

Die Lösung hierfür besteht darin, mindestens den weißen Block festzulegen position: relativeund explizit z-indexfestzulegen. Sie könnten noch einen Schritt weiter gehen und die Katzenelemente position: relativesenken z-index, um besonders sicher zu sein.

.content__block { position: relative; z-index: 2; } .cat-top, .cat-bottom { position: relative; z-index: 1; }

Meiner Meinung nach werden dadurch die meisten, wenn nicht alle grundlegenderen Z-Index-Probleme gelöst.

Kommen wir nun zu unserem letzten Grund, dass Ihr z-indexnicht funktioniert. Dieser ist etwas komplexer, da er übergeordnete und untergeordnete Elemente umfasst.

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 rosa Seitenregisterkarte 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 Seitenregisterkarte.

Werfen wir einen Blick auf das CSS für die betreffenden Elemente:

.content { position: relative; z-index: 1; } .modal { position: fixed; z-index: 100; } .side-tab { position: fixed; z-index: 5; }

Für alle Elemente ist ihre Position festgelegt, und auf der Registerkarte "Seite" befindet sich eine z-index5, die sie über dem Inhaltselement positioniert, das sich auf befindet z-index: 1.

Dann hat das Modal, z-index: 100das es oben auf die Seitenlasche legen sollz-index: 5 . Stattdessen befindet sich die modale Überlagerung unter der Seitenlasche.

Warum passiert das?

Zuvor haben wir einige Faktoren angesprochen, die in den Stapelkontext einfließen, z. B. ob die Position des Elements festgelegt ist, sowie die Reihenfolge im Markup.

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 fraglichen Elemente genauer an.

Hier ist das Markup, das wir haben:

Wenn wir uns das Markup ansehen, können wir sehen, dass der Inhalt und die Seitenregisterelemente Geschwister sind. Das heißt, sie befinden sich auf derselben Ebene im Markup (dies unterscheidet sich von der Z-Index-Ebene). Und das Modal ist ein untergeordnetes Element des Inhaltselements.

Da sich das Modal innerhalb des Inhaltselements befindet, z-indexwirkt sich sein Wert von 100 nur auf das übergeordnete Element, das Inhaltselement, aus. Wenn es beispielsweise andere untergeordnete Elemente gäbe, die Geschwister des Modals sind, würden ihre z-indexWerte sie über oder untereinander setzen.

Der z-indexWert dieser untergeordneten Elemente bedeutet jedoch nichts außerhalb des übergeordneten Elements, da für das übergeordnete Inhaltselement z-index1 festgelegt ist.

Seine Kinder, einschließlich des Modals, können dieses z-indexLevel also nicht verlassen.

(Sie können sich mit dieser leicht deprimierenden Metapher daran erinnern: Ein Kind kann von seinen Eltern eingeschränkt werden und sich nicht von ihnen befreien.)

Für dieses Problem gibt es mehrere Lösungen:

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

Das korrigierte Markup würde dann folgendermaßen aussehen:

Nun ist das modale Element ein Geschwisterelement für die beiden anderen. Dadurch werden alle drei Elemente in denselben Stapelkontext wie sie gestellt, 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 positionEinstellung aus dem Inhaltselement entfernen :

.content { // No position set } .modal { position: absolute; z-index: 100; } .side-tab { position: absolute; z-index: 5; }

Da das Inhaltselement jetzt nicht positioniert ist, wird der z-indexWert des Modals nicht mehr begrenzt . Das offene Modal wird also aufgrund seines höheren Werts z-indexvon 100 über dem Element der seitlichen Lasche positioniert .

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

Denn wenn Sie aus irgendeinem Grund in Zukunft das Inhaltselement positionieren müssen, wird die Reihenfolge des Modals im Stapelkontext erneut eingeschränkt.

Zusammenfassend

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

  1. Überprüfen Sie, ob für die Elemente die Position und die Z-Index-Nummern in der richtigen Reihenfolge festgelegt sind.
  2. Stellen Sie sicher, dass Sie keine übergeordneten Elemente haben, die die z-indexEbene ihrer untergeordneten Elemente einschränken .

Mehr wollen?

Ich erstelle einen Kurs in Responsive Design! Melden Sie sich hier an, um eine E-Mail zu erhalten, wenn es veröffentlicht wird.

Ich schreibe Webentwicklungs-Tutorials auf meinem Blog coder-coder.com, poste Mini-Tipps auf Instagram und Codierungs-Tutorials auf YouTube.