Wie kann ich ein CSS-Pseudoelement unterhalb seines übergeordneten Elements positionieren?

Pseudoelemente unter ihrem übergeordneten Element positionieren

In CSS werden Pseudoelemente normalerweise relativ zu ihrem übergeordneten Element positioniert. Versuche, sie mithilfe von Z-Index-Werten unterhalb ihres übergeordneten Elements zu platzieren, scheinen jedoch wirkungslos zu sein.

Erstellen eines Stapelkontexts für Pseudoelemente

Um diese Einschränkung zu überwinden, verwenden Sie pseudo -Elemente müssen in einem neuen Stapelkontext positioniert werden. Dies wird erreicht durch:

• Festlegen der Positionseigenschaft für das Pseudoelement auf absolut oder fest.
• Zuweisen eines nicht automatischen Werts zum Z-Index des Pseudoelements.

Beispiel:

Bedenken Sie Folgendes code:

#element {
    position: relative;
    z-index: 1;
}
#element::after {
    content: " ";
    position: absolute;
    z-index: 0;
    width: 100px;
    height: 100px;
}

Zunächst wird das Pseudoelement #element::after über seinem übergeordneten Element positioniert. So ändern Sie diese Reihenfolge:

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

#element::after {
    content: "";
    width: 150px;
    height: 150px;
    background-color: red;
    
    /* Positioning and creating a stacking context */
    position: absolute;
    z-index: -1;
}

Durch Hinzufügen von position: absolute und z-index: -1 zum Pseudoelement wird ein neuer Stapelkontext erstellt. Dadurch wird das Pseudoelement unter sein übergeordnetes Element verschoben, während seine relative Position im Kontext beibehalten wird.

Das obige ist der detaillierte Inhalt vonWie kann ich ein CSS-Pseudoelement unterhalb seines übergeordneten Elements positionieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!