Bolehkah saya Meletakkan Elemen Pseudo CSS Di Bawah Induknya?

Bolehkah Elemen Pseudo Diletakkan di Bawah Item Induknya?

Dalam penggayaan CSS, elemen pseudo seperti ::selepas atau ::before dianggap keturunan yang berkaitan dengannya elemen. Biasanya, mereka muncul di atas elemen induk mereka. Jika anda ingin meletakkan elemen pseudo di bawah induknya, anda perlu mewujudkan konteks tindanan baharu untuk mengubah susunan tindanan lalai.

Menempatkan unsur pseudo sebagai mutlak dan menetapkan z bukan lalai -nilai indeks mencipta konteks tindanan yang diperlukan. Ini meletakkan elemen pseudo dalam lapisan yang berasingan dan membenarkan ia bertindih dengan elemen lain, termasuk induknya.

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

Dalam contoh ini, elemen pseudo ::after diletakkan secara mutlak dan diberi z- nilai indeks -1. Ini meletakkannya di belakang elemen induk #elemen, kerana yang terakhir mempunyai indeks z lalai 0.

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