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

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

Sie versuchen, ein Element mit dem Pseudoelement :after, aber mit dem Element ::after zu formatieren scheint über dem Element selbst zu liegen:

#element {
    position: relative;
    z-index: 1;
}

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

Können Sie die Stapelreihenfolge ändern, um das Pseudoelement darunter zu platzieren? übergeordnetes Element?

Antwort: Stapelkontextmanipulation

Pseudoelemente sind praktisch untergeordnete Elemente ihres übergeordneten Elements. Das Einrichten eines neuen Stapelkontexts ist erforderlich, um die Standardstapelreihenfolge zu ändern und das Pseudoelement unter seinem übergeordneten Element zu positionieren. Dies wird erreicht, indem eine absolute Positionierung und ein Z-Index-Wert, der nicht „auto“ ist, auf das Pseudoelement angewendet werden:

#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 */
}

Dadurch wird ein neuer Stapelkontext erstellt, der das Pseudoelement hinter seinem übergeordneten Element platziert .

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