Bolehkah elemen Pseudo CSS Diposisikan Di Bawah Elemen Induknya?

Aturan Susunan CSS: Bolehkah Pseudo-element Diletakkan di Bawah Elemen Induk?

Apabila menggayakan elemen menggunakan :after pseudo-element, ia mungkin kelihatan bahawa unsur pseudo sentiasa berada di atas unsur induk. Ini kerana elemen pseudo secara semula jadi dianggap sebagai turunan daripada elemen yang berkaitan dan mewarisi konteks tindanan yang sama.

Penyelesaian: Mencipta Konteks Susunan Baharu

Untuk meletakkan pseudo-elemen di bawah induknya, anda perlu mencipta konteks tindanan baharu. Ini boleh dicapai dengan meletakkan elemen pseudo secara mutlak dan menetapkan nilai indeks-z selain daripada "auto."

Pertimbangkan kod CSS dan HTML berikut:

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

Penjelasan:

• Div #elemen diberi kedudukan relatif untuk menyediakan konteks untuk kedudukan mutlak.
• Unsur pseudo :selepas ditakrifkan dengan kandungan dan dimensinya.
• Unsur pseudo diletakkan secara mutlak dan diberikan indeks z negatif (-1) untuk memastikannya diletakkan di bawah elemen induk.

Dengan konteks tindanan baharu ini, unsur pseudo :selepas boleh kini diletakkan di bawah div #elemen, tanpa mengira susunan susunan elemen induk.

Atas ialah kandungan terperinci Bolehkah elemen Pseudo CSS Diposisikan Di Bawah Elemen Induknya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!