Können CSS-Pseudoelemente unterhalb ihres übergeordneten Elements positioniert werden?

CSS-Stapelreihenfolge: Können Pseudoelemente unter übergeordneten Elementen positioniert werden?

Beim Stylen eines Elements mit dem Pseudoelement :after Es kann den Anschein haben, dass das Pseudoelement immer über dem übergeordneten Element sitzt. Dies liegt daran, dass Pseudoelemente von Natur aus als Nachkommen ihres zugehörigen Elements behandelt werden und denselben Stapelkontext erben.

Lösung: Erstellen eines neuen Stapelkontexts

Um a zu positionieren Wenn Sie ein Pseudoelement unter seinem übergeordneten Element platzieren, müssen Sie einen neuen Stapelkontext erstellen. Dies kann erreicht werden, indem das Pseudoelement absolut positioniert und ein anderer Z-Index-Wert als „auto“ zugewiesen wird.

Beachten Sie den folgenden CSS- und HTML-Code:

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

Erläuterung:

• Dem #element div wird eine relative Position zugewiesen, um einen Kontext für absolute bereitzustellen Positionierung.
• Das :after-Pseudoelement wird mit seinem Inhalt und seinen Abmessungen definiert.
• Das Pseudoelement wird absolut positioniert und ihm wird ein negativer Z-Index (-1) zugewiesen, um dies sicherzustellen unterhalb des übergeordneten Elements platziert.

Mit diesem neuen Stapelkontext kann das :after-Pseudoelement jetzt unterhalb des #element div positioniert werden, unabhängig vom Stapel des übergeordneten Elements bestellen.

Das obige ist der detaillierte Inhalt vonKönnen CSS-Pseudoelemente unterhalb ihres übergeordneten Elements positioniert werden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!