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.
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?
Jika indeks z tidak berfungsi, properti apa yang harus Anda periksa pada elemen?
display
relative
position
static
.animation
Apakah flexbox dan petak memerlukan position: relative
?
position: relative
.