4 alasan z-index Anda tidak berfungsi (dan cara memperbaikinya) - Coder Coder

Posting ini awalnya diterbitkan di Coder-Coder.com.

Z-index adalah properti CSS yang memungkinkan Anda memposisikan elemen dalam lapisan di atas satu sama lain. Ini sangat berguna, dan sejujurnya alat yang sangat penting untuk mengetahui cara menggunakan CSS.

Sayangnya, z-index adalah salah satu properti yang tidak selalu berfungsi secara intuitif. Tampaknya sederhana pada awalnya - nomor indeks-z yang lebih tinggi berarti elemen tersebut akan berada di atas elemen dengan nomor indeks-z yang lebih rendah. Tetapi ada beberapa aturan tambahan yang membuat segalanya menjadi lebih rumit. Dan Anda tidak bisa selalu memperbaiki berbagai hal dengan mengatur z-index ke 999999! ?

Artikel ini akan menjelaskan secara rinci empat alasan paling umum mengapa z-index tidak berfungsi untuk Anda, dan bagaimana Anda dapat memperbaikinya.

Kami akan membahas beberapa contoh kode aktual dan memecahkan masalah mereka. Setelah membaca artikel ini, Anda akan dapat memahami dan menghindari jebakan indeks-z yang umum itu!

Mari kita lihat alasan pertama:

1. Elemen dalam konteks susun yang sama akan ditampilkan dalam urutan tampilan, dengan elemen terakhir di atas elemen sebelumnya.

Dalam contoh pertama kami, kami memiliki tata letak yang relatif sederhana yang mencakup 3 elemen utama:

  • Gambar kucing
  • Blok putih dengan teks
  • Gambar lain dari kucing yang sama

Berikut markup HTML untuk itu:

 Meow meow meow... 

Dalam tata letak ini, idealnya kami ingin blok teks putih berada di atas kedua kucing.

Untuk mencoba mencapai ini, kami telah menambahkan beberapa margin negatif ke CSS untuk kedua gambar kucing, sehingga sedikit tumpang tindih dengan blok putih:

.cat-top { margin-bottom: -110px; } .cat-bottom { float: right; margin-top: -120px; }

Namun, tampilannya seperti ini:

Kucing pertama memang diposisikan di bawah blok konten putih, seperti yang kita inginkan. Tapi gambar kucing kedua diposisikan di atas blok!

Mengapa ini terjadi?

Alasan perilaku ini adalah karena susunan susunan alami di halaman web. Pedoman ini pada dasarnya menentukan elemen mana yang akan berada di atas dan mana yang akan berada di bawah.

Bahkan jika elemen tidak memiliki himpunan indeks-z, ada rima dan alasan yang mana yang akan berada di atas.

Dalam kasus kami, tidak ada elemen yang memiliki nilai indeks-z. Jadi urutan susunnya ditentukan oleh urutan tampilannya. Menurut aturan ini, elemen yang muncul kemudian di markup akan berada di atas elemen yang datang sebelumnya.

(Anda dapat membaca lebih lanjut tentang pedoman urutan susun di Mozilla Developer Network di sini.)

Dalam contoh kami dengan kucing dan balok putih, mereka mematuhi aturan ini. Itulah mengapa kucing pertama berada di bawah elemen balok putih, dan balok putih berada di bawah kucing kedua.

Oke, urutan menumpuk semuanya baik dan bagus, tapi bagaimana kita memperbaiki CSS sehingga kucing kedua berada di bawah blok putih?

Mari kita lihat alasan kedua:

2. Elemen tidak disetel posisinya

Salah satu pedoman lain yang menentukan susunan susun adalah apakah suatu elemen telah diatur posisinya atau tidak.

Untuk menyetel posisi elemen, tambahkan positionproperti CSS ke selain static, seperti relativeatau absolute. (Anda dapat membaca lebih lanjut tentang itu di artikel yang saya tulis ini.)

Menurut aturan ini, elemen yang diposisikan akan ditampilkan di atas elemen yang tidak diposisikan.

Jadi menyetel blok putih menjadi position: relative, dan membiarkan dua elemen kucing tidak posisinya akan menempatkan blok putih di atas kucing dalam urutan susun.

Seperti inilah tampilannya- Anda juga dapat bermain-main dengan Codepen di atas.

Woo hoo!

Sekarang, hal berikutnya yang ingin kita lakukan adalah memutar kucing bawah secara terbalik, menggunakan transformproperti. Dengan begitu, kedua kucing akan berada di bawah balok putih, dengan hanya kepala yang mencuat.

Tetapi melakukan hal itu dapat menyebabkan z-indexkebingungan yang lebih terkait. Kami akan membahas masalah dan solusinya di bagian selanjutnya.

3. Menyetel beberapa properti CSS seperti opacity atau transform akan menempatkan elemen dalam konteks susunan yang baru.

Seperti yang baru saja kami sebutkan, kami ingin membalikkan bagian bawah kucing. Untuk mencapai ini, kami akan menambahkan transform: rotate(180deg).

.cat-bottom { float: right; margin-top: -120px; transform: rotate(180deg); }

Tapi ini menyebabkan kucing bawah ditampilkan lagi di atas balok putih!

Apa sih yang terjadi disini ??

Anda mungkin tidak sering mengalami masalah ini, tetapi aspek lain dari susunan penumpukan adalah bahwa beberapa properti CSS menyukai transformatau opacityakan menempatkan elemen tersebut ke dalam konteks susunannya yang baru.

Ini berarti bahwa menambahkan transformke .cat-bottomelemen membuatnya berperilaku seolah-olah memiliki z-index0. Meskipun tidak memiliki positionatau z-indexdisetel sama sekali! (W3.org memiliki beberapa dokumentasi informatif namun cukup padat tentang cara kerjanya dengan opacityproperti)

Ingat, kami tidak pernah menambahkan z-indexnilai ke blok putih, hanya position: relative. Ini cukup untuk menempatkan balok putih di atas kucing yang tidak diposisikan.

Tetapi karena .bottom-catelemen bertindak seolah-olah itu relatif diposisikan dengan z-index: 0, mengubahnya telah menempatkannya di atas blok putih.

Solusi untuk ini adalah mengatur position: relativedan secara eksplisit mengatur z-indexsetidaknya blok putih. Anda bisa melangkah lebih jauh dan mengatur position: relativedan menurunkan z-indexelemen kucing, hanya untuk ekstra aman.

.content__block { position: relative; z-index: 2; } .cat-top, .cat-bottom { position: relative; z-index: 1; }

Menurut pendapat saya, melakukan ini akan menyelesaikan sebagian besar, jika tidak semua masalah indeks-z yang lebih mendasar.

Sekarang, mari beralih ke alasan terakhir mengapa Anda z-indextidak berfungsi. Yang ini sedikit lebih kompleks, karena melibatkan elemen induk dan anak.

4. Elemen berada dalam konteks penumpukan yang lebih rendah karena level indeks-z induknya

Mari kita lihat contoh kode kita untuk ini:

Inilah yang kami miliki: laman web sederhana dengan konten biasa, dan tab sisi merah muda bertuliskan "Kirim Umpan Balik" yang ditempatkan di atas konten.

Kemudian, saat Anda mengklik foto kucing, jendela modal dengan hamparan latar belakang abu-abu transparan terbuka.

Namun, meskipun jendela modal terbuka, tab samping masih di atas hamparan abu-abu. Kami ingin overlay ditampilkan di atas segalanya, termasuk tab samping.

Mari kita lihat CSS untuk elemen yang dimaksud:

.content { position: relative; z-index: 1; } .modal { position: fixed; z-index: 100; } .side-tab { position: fixed; z-index: 5; }

Semua elemen ditetapkan posisinya, dan tab samping memiliki z-index5, yang memposisikannya di atas elemen konten, yaitu di z-index: 1.

Kemudian, modal memiliki z-index: 100yang harus meletakkannya di atas tab samping di z-index: 5. Namun, modal overlay berada di bawah tab samping.

Mengapa ini terjadi?

Sebelumnya, kami membahas beberapa faktor yang masuk ke konteks stacking, seperti jika elemen memiliki set posisinya, serta urutannya di markup.

Namun aspek lain dari konteks penumpukan adalah bahwa elemen anak terbatas pada konteks penumpukan induknya.

Mari kita lihat lebih dekat ketiga elemen yang dimaksud.

Inilah markup yang kami miliki:

Melihat markup, kita dapat melihat bahwa konten dan elemen tab samping adalah saudara. Artinya, mereka ada pada level yang sama di markup (ini berbeda dari level indeks-z). Dan modal adalah elemen anak dari elemen konten.

Karena modal berada di dalam elemen konten, z-index100 hanya memiliki efek di dalam induknya, elemen konten. Misalnya, jika ada elemen anak lain yang bersaudara dengan modal, z-indexnilainya akan menempatkannya di atas atau di bawah satu sama lain.

Tetapi z-indexnilai elemen anak tersebut tidak berarti apa-apa di luar induk, karena elemen konten induk telah z-indexdisetel ke 1.

Jadi anak-anaknya, termasuk modal, tidak bisa keluar dari z-indexlevel itu.

(Anda dapat mengingatnya dengan metafora yang sedikit menyedihkan ini: seorang anak dapat dibatasi oleh orang tuanya, dan tidak dapat membebaskan mereka.)

Ada beberapa solusi untuk masalah ini:

Solusi: Pindahkan modal di luar konten induk, dan ke dalam konteks penumpukan utama halaman.

Markup yang dikoreksi akan terlihat seperti ini:

Sekarang, elemen modal adalah elemen saudara dari dua elemen lainnya. Ini menempatkan ketiga elemen dalam konteks penumpukan yang sama dengan mereka, jadi setiap level indeks-z mereka sekarang akan saling mempengaruhi.

Dalam konteks penumpukan baru ini, elemen akan ditampilkan dalam urutan berikut, dari atas ke bawah:

  • modal ( z-index: 100)
  • tab samping ( z-index: 5)
  • konten ( z-index: 1)

Solusi Alternatif: Hapus pemosisian dari konten, sehingga tidak akan membatasi indeks-z modal.

Jika Anda tidak ingin atau tidak dapat mengubah markup, Anda dapat memperbaiki masalah ini dengan menghapus positionpengaturan dari elemen konten:

.content { // No position set } .modal { position: absolute; z-index: 100; } .side-tab { position: absolute; z-index: 5; }

Karena elemen konten sekarang tidak posisinya, itu tidak akan lagi membatasi nilai modal z-index. Jadi modal terbuka akan diposisikan di atas elemen tab samping, karena lebih tinggi z-indexdari 100.

Sementara ini berhasil, saya pribadi akan mencari solusi pertama.

Karena jika karena alasan tertentu di masa mendatang Anda harus memposisikan elemen konten, itu akan membatasi lagi urutan modal dalam konteks penumpukan.

Singkatnya

Saya harap tutorial ini bermanfaat bagi Anda! Singkatnya, sebagian besar masalah dengan indeks-z dapat diselesaikan dengan mengikuti dua pedoman berikut:

  1. Periksa apakah elemen memiliki set posisinya dan nomor indeks-z dalam urutan yang benar.
  2. Pastikan Anda tidak memiliki elemen induk yang membatasi z-indexlevel anak mereka.

Ingin lebih?

Saya membuat kursus dalam desain responsif! Daftar di sini untuk mendapatkan email saat dipublikasikan.

Saya menulis tutorial pengembangan web di blog saya coder-coder.com, memposting tip mini di Instagram dan tutorial coding di YouTube.