Warum erscheint mein ::before-Pseudoelement nicht hinter seinem übergeordneten Element, wenn ich einen Z-Index auf das übergeordnete Element anwende?

Z-Index und Pseudoelemente: Eine eingehende Erkundung

In diesem Artikel tauchen wir in die faszinierende Welt von CSS ein Stapelkontexte und wie sie mit Pseudoelementen interagieren, insbesondere dem Pseudoelement ::before. Wir werden ein häufiges Problem untersuchen, das bei der Verwendung von z-index mit ::before auftritt, und eine umfassende Lösung bereitstellen, die das korrekte Stapelverhalten gewährleistet.

Das Problem

Bedenken Sie das folgendes CSS:

<code class="css">header { 
    background: yellow;
    position:relative;
    height: 100px;
    width: 100px;
    z-index:30;
}

header::before { 
    content:"Hide you behind!";
    background: red;
    position:absolute;
    height: 100px;
    width: 100px;
    top:25px;
    left:25px;
    z-index:-1;
}</code>

In diesem Code haben wir ein „header“-Element mit einem ::before-Pseudoelement erstellt. Das gewünschte Verhalten besteht darin, dass sich das gelbe „header“-Element im Vordergrund und das rote ::before-Pseudoelement im Hintergrund befindet. Wenn wir jedoch einen Z-Index von 30 auf das „Header“-Element anwenden, erscheint das Pseudoelement ::before nicht mehr hinter dem übergeordneten Element.

Erklärung

Um dieses Verhalten zu verstehen, müssen wir uns mit dem Konzept der CSS-Stacking-Kontexte befassen. Ein Stapelkontext definiert eine Reihe von Ebenen, in denen Elemente basierend auf ihren Z-Indexwerten vor oder hintereinander gestapelt werden. Die Erstellung eines Stapelkontexts wird durch bestimmte CSS-Eigenschaften, einschließlich Z-Index, ausgelöst.

Wenn wir im obigen Beispiel einen Z-Index von 30 auf das „Header“-Element anwenden, wird ein neuer Stapel erstellt Kontext. Dieser neue Stapelkontext trennt das „Header“-Element und seine untergeordneten Elemente (einschließlich des ::before-Pseudoelements) vom Rest des Dokumentflusses.

Das ::before-Pseudoelement wird als untergeordnetes Element betrachtet Der Stapelkontext des „Header“-Elements. Daher ist es durch die Grenzen des Stapelkontexts eingeschränkt und kann nicht außerhalb des Stapelkontexts schweben und hinter dem „Header“-Element erscheinen.

Lösung

Um dieses Problem zu lösen, haben wir Der Z-Index des ::before-Pseudoelements kann nicht einfach erhöht werden. Stattdessen müssen wir einen neuen Stapelkontext für das ::before-Pseudoelement erstellen, damit es korrekt hinter dem „header“-Element gestapelt werden kann.

Eine Möglichkeit, dies zu erreichen, besteht darin, das „header“-Element einzuschließen in einem anderen Element, wie unten gezeigt:

<code class="css"><div class="wrapper">
  <header>
    ...
  </header>
</div>

.wrapper { 
    position:relative;
    z-index:30;
}</code>

Indem wir dieses neue Element erstellen und ihm einen Z-Index zuweisen, erstellen wir im Wesentlichen einen neuen Stapelkontext, der vom Stapelkontext des „Header“-Elements getrennt ist. Dadurch kann das ::before-Pseudoelement innerhalb des neuen Stapelkontexts korrekt hinter dem „header“-Element gestapelt werden.

Fazit

Verstehen von CSS-Stacking-Kontexten und Pseudo- Elementinteraktionen sind für die Erstellung komplexer Layouts und die Gewährleistung der richtigen Elementpositionierung von entscheidender Bedeutung. Durch die sorgfältige Verwaltung von Stapelkontexten können wir die Schichtung von Elementen steuern und die gewünschten visuellen Effekte erzielen.

Das obige ist der detaillierte Inhalt vonWarum erscheint mein ::before-Pseudoelement nicht hinter seinem übergeordneten Element, wenn ich einen Z-Index auf das übergeordnete Element anwende?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!