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