## Wie positioniere ich ein „::before“-Pseudoelement hinter seinem übergeordneten Element, wenn ich „z-index“ verwende?

Z-Index-Rätsel mit Vor-Pseudoelement

Bei der Verwendung eines Vor-Pseudoelements innerhalb eines übergeordneten Elements ist es wichtig, dessen Problem zu lösen Positionierungsverhalten. Standardmäßig wird das Pseudoelement innerhalb seines übergeordneten Elements positioniert.

Durch die Zuweisung eines Z-Index zum übergeordneten Element wird jedoch ein neuer Stapelkontext erstellt, der seinen Inhalt isoliert. Daher kann das vorherige Pseudoelement aufgrund der Stapelkontextgrenze auch bei einem negativen Z-Index nicht hinter dem übergeordneten Element erscheinen.

Um dieses Problem zu beheben, ziehen Sie die folgende Lösung in Betracht:

1. Separate Elementhierarchie: Stellen Sie dem Header-Element ein anderes Element voran. Dadurch wird eine natürliche Stapelreihenfolge erstellt, bei der dem neuen übergeordneten Element ein Z-Index zugewiesen werden kann, der niedriger als der Header ist, sodass das vorherige Pseudoelement dahinter erscheinen kann.
2. Z-Index-Verschachtelung: Auch wenn dies weniger empfehlenswert ist, können Sie negative Z-Index-Werte für das Pseudoelement und positive Werte für das übergeordnete Element verwenden, um eine gewünschte Stapelreihenfolge innerhalb desselben Stapelkontexts zu erstellen. Dieser Ansatz kann jedoch zu komplexerem Code und potenziellen Problemen mit der browserübergreifenden Kompatibilität führen.

Beispiel:

<code class="css"><div class="wrapper">
  <header>
    content...
    <span class="pseudo-element">Before content...</span>
  </header>
</div>

.wrapper {
  position: relative;
  z-index: 0;
}

header {
  position: relative;
  background: yellow;
  height: 100px;
  width: 100px;
  z-index: 1;
}

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

Das obige ist der detaillierte Inhalt von## Wie positioniere ich ein „::before“-Pseudoelement hinter seinem übergeordneten Element, wenn ich „z-index“ verwende?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!