Bagaimanakah Saya Boleh Meletakkan Elemen Pseudo Di Bawah Elemen Induknya?

Bolehkah Elemen Pseudo Diletakkan di Bawah Induknya?

Anda cuba menggayakan elemen menggunakan elemen pseudo :selepas, tetapi elemen ::selepas nampaknya berada di atas elemen itu sendiri:

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

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

Bolehkah anda mengubah susunan untuk meletakkan unsur pseudo di bawah induknya?

Jawapan: Manipulasi Konteks Susunan

Unsur pseudo secara berkesan adalah unsur anak daripada induknya. Mewujudkan konteks tindanan baharu adalah perlu untuk mengubah suai susunan susunan lalai dan meletakkan elemen pseudo di bawah induknya. Ini dicapai dengan menggunakan kedudukan mutlak dan nilai indeks-z yang bukan "auto" kepada elemen pseudo:

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

Ini mewujudkan konteks tindanan baharu yang meletakkan elemen pseudo di belakang elemen induknya .

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Meletakkan Elemen Pseudo Di Bawah Elemen Induknya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!