Konteks pengindeksan dan penumpukan

Podcast CSS - 019: konteks indeks z dan penumpukan

Katakanlah Anda memiliki beberapa elemen yang diposisikan dan seharusnya diposisikan di atas satu sama lain. Anda mungkin menulis sedikit HTML seperti ini:

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

Tetapi, kubus mana yang berada di atas yang lain, secara {i>default<i}? Untuk mengetahui item mana yang akan melakukannya, Anda perlu memahami konteks indeks z dan penumpukan.

Indeks Z

Properti 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 ke dan mana yang lebih jauh dari Anda. Sumbu vertikal di web adalah sumbu Y dan sumbu horizontal adalah sumbu X.

Setiap sumbu yang mengelilingi elemen

Properti z-index menerima nilai numerik yang dapat berupa angka positif atau negatif. Elemen akan muncul di atas elemen lain jika memiliki nilai z-index yang lebih tinggi. Jika z-index tidak ditetapkan pada elemen Anda, perilaku default-nya adalah urutan sumber dokumen menentukan sumbu Z. Artinya elemen yang jauh ke bawah dokumen berada di atas elemen yang muncul sebelumnya.

Dalam alur normal, jika Anda menetapkan nilai tertentu untuk z-index dan nilai tersebut tidak berfungsi, Anda harus menyetel nilai position elemen ke nilai apa pun selain static. Ini adalah tempat umum saat orang-orang kesulitan dengan z-index.

Namun, hal ini tidak berlaku jika Anda berada dalam konteks flexbox atau petak, karena Anda dapat mengubah indeks z item flex 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 berada 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, nilai ini telah membuat konteks tumpukan baru. Artinya, meski Anda menetapkan .child untuk memiliki z-index -999, format tersebut tetap tidak akan tertinggal .my-parent.

Menumpuk konteks

Konteks penumpukan adalah sekelompok elemen yang memiliki induk yang sama dan bergerak naik dan turun pada sumbu z secara bersamaan.

Dalam contoh ini, elemen induk pertama memiliki z-index dari 1, sehingga membuat konteks penumpukan baru. Elemen turunannya memiliki z-index 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 induk membuat konteks penumpukan, z-index semua turunan didasarkan pada turunan mereka.

z-index elemen di dalam konteks penumpukan selalu relatif terhadap urutan induk saat ini dalam konteks penumpukannya sendiri.

Membuat konteks penumpukan

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

Untuk menjelaskan apa yang dimaksud dengan lapisan komposit, bayangkan halaman web adalah kanvas. Browser menggunakan HTML dan CSS Anda dan menggunakannya untuk menentukan ukuran kanvas. Lalu, menggambar halaman di kanvas ini. Jika suatu elemen berubah—misalnya, berubah posisi—browser kemudian harus kembali dan mengerjakan ulang apa yang harus dilukis.

Untuk membantu performa, browser membuat lapisan gabungan baru yang berlapis di atas kanvas. Ini hampir seperti catatan tempel: memindahkan dan mengubahnya tidak berdampak besar pada keseluruhan kanvas. Lapisan gabungan baru dibuat untuk elemen dengan opacity, transform, dan will-change karena sangat mungkin berubah, sehingga browser memastikan bahwa perubahan berperforma sebaik mungkin dengan menggunakan GPU untuk menerapkan penyesuaian gaya.

Referensi

Menguji pemahaman Anda

Uji pengetahuan Anda tentang indeks z

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

Artikel mana yang berada di atas secara default?

1
Letaknya di bagian paling belakang.
2
Coba lagi.
3
Coba lagi.
4
Yang terakhir dalam dokumen berada di atas ya!

Jika indeks z tidak berfungsi, properti apa yang harus Anda periksa pada elemen?

display
Bukan properti yang kemungkinan menyebabkan indeks z tidak berfungsi.
relative
Ini adalah nilai CSS, bukan properti.
position
Pastikan nilai ini disetel ke selain static.
animation
Bukan properti yang kemungkinan menyebabkan indeks z tidak berfungsi.

Apakah flexbox dan petak memerlukan position: relative?

Ya
Jenis tampilan ini tidak memerlukannya.
Tidak
Penggunaan indeks z di dalam tata letak petak atau flexbox akan berfungsi tanpa position: relative.