Bagaimanakah Saya Boleh Meletakkan Elemen Pseudo CSS Di Bawah Elemen Induknya?

Letakkan Elemen Pseudo Di Bawah Elemen Induknya

Dalam CSS, elemen pseudo biasanya diletakkan secara relatif kepada elemen induknya. Walau bagaimanapun, percubaan untuk meletakkannya di bawah induknya menggunakan nilai indeks-z mungkin kelihatan tidak berkesan.

Mencipta Konteks Susunan untuk Elemen Pseudo

Untuk mengatasi had ini, pseudo -elemen mesti diletakkan dalam konteks tindanan baharu. Ini dicapai dengan:

• Menetapkan sifat kedudukan kepada mutlak atau tetap untuk unsur pseudo.
• Menetapkan nilai bukan auto kepada unsur pseudo z-index.

Contoh:

Pertimbangkan kod berikut:

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

Pada mulanya, #elemen::selepas pseudo -elemen diletakkan di atas elemen induknya. Untuk menukar tertib ini:

#element {
    position: relative;
    width: 100px;
    height: 100px;
    background-color: blue;
}

#element::after {
    content: "";
    width: 150px;
    height: 150px;
    background-color: red;
    
    /* Positioning and creating a stacking context */
    position: absolute;
    z-index: -1;
}

Dengan menambahkan kedudukan: mutlak dan indeks-z: -1 pada unsur pseudo, konteks tindanan baharu dicipta. Ini mengalihkan unsur pseudo ke bawah elemen induknya sambil mengekalkan kedudukan relatifnya dalam konteks.

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