Wie können Sie ein Pseudoelement hinter seinem übergeordneten Element positionieren, wenn das übergeordnete Element einen Z-Index hat?

Z-Index für Pseudoelemente manipulieren

In CSS kann sich die Anwendung eines Z-Index auf übergeordnete Elemente auf das Stapelverhalten von Pseudoelementen auswirken -Elemente. Dieser Artikel untersucht das Problem und bietet eine Lösung.

Das Problem

Wenn einem übergeordneten Element ein Z-Index zugewiesen wird, wird das darin enthaltene Pseudoelement eingeschränkt der Stapelkontext des übergeordneten Elements. Das Pseudoelement kann sich nicht mehr über diesen Kontext hinaus erstrecken und hinter dem übergeordneten Element erscheinen.

Stacking-Kontexte verstehen

Durch das Erstellen eines neuen Stacking-Kontexts wird im Wesentlichen eine separate Ebene für den erstellt Element in Frage. Elemente innerhalb dieser Ebene sind von Elementen außerhalb des Kontexts isoliert. In diesem Fall ist das Pseudoelement, das normalerweise innerhalb der übergeordneten Ebene vorhanden ist, jetzt im neuen Stapelkontext des übergeordneten Elements gefangen.

Die Lösung

Um das zu lösen Problem, CSS ermöglicht es einem, aus einem Stapelkontext auszubrechen. Dies wird in der Regel durch die Einführung eines neuen Elements vor dem übergeordneten Element erreicht, das eine bestimmte Stapelreihenfolge erfordert. Dieses „Wrapper“-Element bildet seinen eigenen Stapelkontext, der es dem Pseudoelement ermöglicht, dahinter zu bleiben, während es dennoch die Stapelreihenfolge nachfolgender Elemente beeinflusst.

Codebeispiel

Betrachten Sie den folgenden Code:

<code class="css"><div id="wrapper">
  <header>
    <span class="pseudo">Hide me!</span>
  </header>
</div>

#wrapper {
  position: relative;
  z-index: 30;
}

header {
  position: relative;
  height: 100px;
  width: 100px;
  background-color: yellow;
}

.pseudo {
  position: absolute;
  top: 25px;
  left: 25px;
  height: 100px;
  width: 100px;
  background-color: red;
  z-index: -1;
}</code>

Indem wir das „wrapper“-Div erstellen und seine Position auf „relativ“ und seinen Z-Index auf 30 festlegen, erstellen wir einen neuen Stapelkontext, außerhalb dessen das Pseudoelement existieren kann. Das Pseudoelement kann nun wie vorgesehen hinter dem gelben „Header“-Element erscheinen.

Das obige ist der detaillierte Inhalt vonWie können Sie ein Pseudoelement hinter seinem übergeordneten Element positionieren, wenn das übergeordnete Element einen Z-Index hat?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!