Können Pseudoelemente unter ihrem übergeordneten Element gestapelt werden?

Kann die Stapelreihenfolge von Pseudoelementen unterhalb ihres übergeordneten Elements liegen?

In CSS erscheinen :after und :before Pseudoelemente nach und vor dem Inhalt des zugehörigen Elements . Während die Standardstapelreihenfolge Pseudoelemente über ihren übergeordneten Elementen platziert, erfordern bestimmte Szenarien eine Umkehrung.

Problem:

Versuch, die Z-Index-Eigenschaft eines Pseudos festzulegen -Element unterhalb des übergeordneten Elements angezeigt wird, führt dies oft dazu, dass es darüber erscheint stattdessen.

Lösung:

Um ein Pseudoelement unter seinem übergeordneten Element zu platzieren, erstellen Sie einen neuen Stapelkontext.

1. Absolute Positionierung: Durch Setzen des Pseudoelements auf position: absolute wird ein neuer Stapelkontext erstellt und der Z-Index aktiviert Steuerung.
2. Z-Index-Zuweisung: Weisen Sie einen Z-Index-Wert zu, der niedriger als der Z-Index des übergeordneten Elements ist, um das Pseudoelement darunter zu positionieren.

Beispiel:

#element {
  position: relative;  /* optional */
  width: 100px;
  height: 100px;
  background-color: blue;
}

#element::after {
  content: "";
  width: 150px;
  height: 150px;
  background-color: red;

  /* create a new stacking context */
  position: absolute;
  z-index: -1;  /* to be below the parent element */
}

Dieser Ansatz bietet eine detaillierte Kontrolle über die Stapelreihenfolge und ermöglicht Ihnen so um die gewünschte Position von Pseudoelementen relativ zu ihrem zugehörigen übergeordneten Element zu erreichen.

Das obige ist der detaillierte Inhalt vonKönnen Pseudoelemente unter ihrem übergeordneten Element gestapelt werden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!