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

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

Im CSS-Stil werden Pseudoelemente wie ::after oder ::before als Nachkommen ihrer zugehörigen Elemente betrachtet Elemente. Normalerweise erscheinen sie über ihrem übergeordneten Element. Wenn Sie ein Pseudoelement unter seinem übergeordneten Element positionieren möchten, müssen Sie einen neuen Stapelkontext einrichten, um die Standardstapelreihenfolge zu ändern.

Ein Pseudoelement als absolut positionieren und ein nicht standardmäßiges z zuweisen Der Wert -index erstellt den erforderlichen Stapelkontext. Dadurch wird das Pseudoelement in einer separaten Ebene platziert und kann andere Elemente, einschließlich seines übergeordneten Elements, überlappen.

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

In diesem Beispiel wird das Pseudoelement ::after absolut positioniert und mit einem Z-Element versehen. Indexwert von -1. Dadurch wird es hinter dem übergeordneten Element #element platziert, da letzteres einen Standard-Z-Index von 0 hat.

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