Bagaimana untuk Meletakkan Elemen Kanak-Kanak Di Atas Induknya Menggunakan z-index dalam CSS?

Meningkatkan Elemen Anak Di Atas Ibu Bapa Menggunakan z-Index

Dalam HTML, elemen mengikut struktur hierarki yang dipanggil Document Object Model (DOM). Apabila berbilang elemen bertindih wujud, sifat z-index mereka menentukan yang mana satu dipaparkan di atas.

Pertimbangkan kod HTML berikut:

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

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

Andaikan anda mahu div "anak" muncul di atas div "wholePage". Walau bagaimanapun, secara lalai, indeks z div "ibu bapa" mempengaruhi semua elemen anaknya.

// Wrong approach
.parent {
  z-index: 100;
  position: relative;
}

// Incorrect output: "child" is hidden behind "wholePage"

Penyelesaian:

Seperti yang dinyatakan dalam jawapan yang disediakan, ia adalah mustahil untuk menetapkan indeks z kanak-kanak lebih tinggi daripada ibu bapanya hanya menggunakan CSS. Walau bagaimanapun, terdapat dua penyelesaian:

1. Alih keluar z-index daripada Induk:

Alih keluar sifat z-index daripada div "induk":

.parent {
  position: relative;
}

Ini membenarkan div "anak" mewarisi znya sendiri -indeks, yang boleh ditetapkan menjadi lebih tinggi daripada "wholePage".

2. Jadikan Adik Beradik Daripada Anak:

Daripada menjadi anak kepada div "ibu bapa", jadikan div "anak" sebagai adik kepada "wholePage" dan tetapkan indeks znya dengan sewajarnya:

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

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

.sibling {
  position: absolute;
  z-index: 100;
}

.child {
  position: absolute;
  z-index: 150;
}

Dalam kes ini, kedua-dua "anak" dan "wholePage" adalah adik beradik, dan div "anak" lebih tinggi z-index memastikan ia muncul di atas. Ambil perhatian bahawa menggunakan "kedudukan: mutlak;" bukannya "kedudukan: relatif;" dalam konteks ini membolehkan kanak-kanak diletakkan di luar aliran ibu bapanya.

Atas ialah kandungan terperinci Bagaimana untuk Meletakkan Elemen Kanak-Kanak Di Atas Induknya Menggunakan z-index dalam CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!