Konteks pengindeksan dan penumpukan

Podcast CSS - 019: konteks indeks z dan tumpukan

Katakanlah Anda memiliki beberapa elemen yang benar-benar diposisikan, dan seharusnya ditempatkan di atas satu sama lain. Anda dapat menulis sedikit kode HTML seperti ini:

<div class="stacked-items">
    <div class="item-1">Item 1</div>
    <div class="item-2">Item 2</div>
</div>

Namun, secara default, mana yang berada di atas yang lain? Untuk mengetahui item mana yang dapat melakukan itu, Anda perlu memahami indeks z dan konteks penumpukan.

Indeks Z

z-index secara eksplisit menetapkan urutan lapisan untuk HTML berdasarkan ruang 3D browser—sumbu Z. Ini adalah sumbu yang menunjukkan lapisan mana yang lebih dekat dan lebih jauh dari Anda. Sumbu vertikal pada web adalah sumbu Y dan sumbu horizontal adalah sumbu X.

Properti z-index menerima nilai numerik yang dapat berupa bilangan positif atau negatif. Elemen akan muncul di atas elemen lain jika memiliki nilai z-index yang lebih tinggi. Jika tidak ada z-index yang ditetapkan pada elemen Anda maka perilaku {i>default<i} adalah bahwa urutan sumber dokumen menentukan sumbu Z. Ini berarti bahwa elemen yang lebih jauh ke bawah dokumen berada di atas elemen yang muncul sebelum mereka.

Pada alur normal, jika Anda menetapkan nilai tertentu untuk z-index dan tidak berfungsi, Anda perlu menyetel nilai position elemen ke apa pun selain static. Biasanya orang-orang mengalami kesulitan dengan z-index.

Hal ini tidak terjadi jika Anda berada dalam konteks {i>flexbox<i} atau {i>grid<i}, karena Anda dapat memodifikasi indeks z item fleksibel atau petak tanpa menambahkan position: relative.

Indeks z negatif

Untuk menetapkan elemen di belakang elemen lain, tambahkan nilai negatif untuk z-index.

.my-element {
    background: rgb(232 240 254 / 0.4);
}

.my-element .child {
    position: relative;
    z-index: -1;
}

Selama .my-element memiliki nilai awal untuk z-index dari auto, elemen .child akan ditempatkan di belakangnya.

Tambahkan CSS berikut ke .my-element, dan elemen .child tidak akan berada di belakangnya.

.my-element {
  position: relative;
  z-index: 0;
  background: rgb(232 240 254 / 0.4);
}

Karena .my-element sekarang memiliki nilai position yang bukan static dan nilai z-index yang bukan auto, fitur ini telah membuat konteks tumpukan baru. Artinya, meskipun Anda menetapkan .child untuk memiliki z-index dari -999, perangkat tetap tidak akan berada di belakang .my-parent.

Konteks bertumpuk

Konteks bertumpuk adalah sekelompok elemen yang memiliki induk yang sama dan bergerak ke atas dan ke bawah sumbu z bersama-sama.

Dalam contoh ini, elemen induk pertama memiliki z-index dari 1, sehingga menciptakan konteks penumpukan yang baru. Elemen turunannya memiliki z-index dari 999. Di samping induk ini, ada elemen induk lain dengan satu turunan. Induk memiliki z-index dari 2 dan elemen turunan juga memiliki z-index dari 2. Karena kedua orang tua membuat konteks yang bertumpuk, z-index semua turunan didasarkan pada turunan induk mereka.

z-index elemen di dalam konteks yang bertumpuk selalu relatif terhadap urutan induk saat ini dalam konteks tumpukannya sendiri.

Membuat konteks yang bertumpuk

Anda tidak perlu menerapkan z-index dan position untuk membuat konteks bertumpuk. Anda dapat membuat konteks tumpukan baru dengan menambahkan nilai untuk properti yang membuat lapisan gabungan baru seperti opacity, will-change, dan transform. Anda dapat lihat daftar lengkap properti di sini.

Untuk menjelaskan apa yang dimaksud dengan lapisan komposit, bayangkan sebuah halaman web adalah sebuah kanvas. Browser mengambil HTML dan CSS Anda, lalu menggunakannya untuk menentukan seberapa besar ukuran kanvas yang akan dibuat. Kemudian, ia melukiskan laman di kanvas ini. Jika suatu elemen berubah—misalnya, mengubah posisi—browser kemudian harus kembali dan mengerjakan ulang apa yang harus digambar.

Untuk membantu meningkatkan kinerja, {i>browser<i} membuat lapisan komposit baru yang dilapiskan di atas kanvas. Catatan tersebut lebih mirip dengan catatan tempel: memindahkan satu objek dan mengubahnya tidak akan berdampak besar pada keseluruhan kanvas. Lapisan komposit baru dibuat untuk elemen dengan opacity, transform dan will-change karena keduanya sangat mungkin berubah, jadi browser memastikan bahwa perubahan berperforma sebaik mungkin dengan menggunakan GPU untuk menerapkan penyesuaian gaya.

Resource

• Memaksakan lapisan
• Panduan Animasi: Memaksa pembuatan lapisan
• Memahami indeks z

Menguji pemahaman Anda

Uji pengetahuan Anda tentang indeks z

<section>
  <article>1</article>
  <article>2</article>
  <article>3</article>
  <article>4</article>
</section>