Bagaimanakah Saya Boleh Meletakkan Elemen Kanak-Kanak Di Atas Induknya Menggunakan Z-index?

Cara Meletakkan Elemen Anak Di Atas Induk dengan Z-Index

Dalam pembangunan web, selalunya perlu mengawal susunan susunan elemen. Secara lalai, elemen diletakkan mengikut susunan ia muncul dalam kod HTML. Walau bagaimanapun, adalah mungkin untuk mengatasi gelagat ini menggunakan sifat z-index.

Pertimbangkan kod HTML berikut:

<div class="parent">
    <div class="child">
        Hello world
    </div>
</div>

<div class="wholePage"></div>

Dalam struktur ini, elemen anak bersarang dalam elemen induk . Susunan tindanan adalah sedemikian rupa sehingga elemen induk diletakkan di atas elemen anak.

Sekarang, katakan kita ingin menukar susunan tindanan supaya elemen anak muncul di atas elemen seluruh Halaman. Kita boleh cuba mencapai ini menggunakan indeks-z, seperti yang ditunjukkan dalam CSS berikut:

.parent {
    z-index: 10;
}

.child {
    z-index: 20;
}

Walau bagaimanapun, perubahan ini tidak akan mempunyai kesan yang diingini. Elemen anak masih akan diletakkan di bawah elemen induk, walaupun ia mempunyai indeks z yang lebih tinggi.

Ini kerana, seperti yang dinyatakan oleh ralat, "indeks z kanak-kanak ditetapkan kepada indeks tindanan yang sama sebagai ibu bapanya." Ini bermakna adalah mustahil untuk meletakkan elemen anak di atas induknya hanya menggunakan indeks-z.

Untuk mencapai susunan tindanan yang diingini, kita mesti mengalih keluar hubungan bersarang antara elemen anak dan induk. Ini boleh dilakukan dengan menjadikan elemen anak sebagai adik kepada elemen induk, seperti berikut:

<div class="parent"></div>
<div class="child">
    Hello world
</div>
<div class="wholePage"></div>

Dengan perubahan ini, elemen anak akan diletakkan di atas elemen keseluruhan Halaman, seperti yang dikehendaki.

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