CSS Z-index: Apa itu dan Bagaimana Menggunakannya?

 

CSS z-index adalah properti yang digunakan untuk mengontrol posisi relatif elemen dalam tumpukan. Dengan menggunakan z-index, kita bisa menentukan elemen mana yang muncul di atas atau di bawah elemen lain. Ini berguna untuk membuat efek seperti menu dropdown, modal, tooltip, dan lainnya.

Apa itu Z-index?

Z-index adalah nilai numerik yang menunjukkan tingkat kedalaman elemen dalam tumpukan. Nilai z-index yang lebih tinggi berarti elemen tersebut lebih dekat ke pengguna, sedangkan nilai z-index yang lebih rendah berarti elemen tersebut lebih jauh dari pengguna.

Z-index hanya berlaku untuk elemen yang memiliki properti position selain static. Properti position bisa bernilai relative, absolute, fixed, atau sticky. Elemen yang memiliki properti position static tidak bisa menggunakan z-index dan akan mengikuti urutan normal dalam tumpukan.

Bagaimana Menggunakan Z-index?

Untuk menggunakan z-index, kita perlu menetapkan nilai z-index untuk setiap elemen yang ingin kita atur posisinya dalam tumpukan. Nilai z-index bisa berupa bilangan bulat positif atau negatif, atau kata kunci auto.

Kata kunci auto berarti elemen tersebut akan mewarisi nilai z-index dari elemen induknya. Jika tidak ada elemen induk yang memiliki nilai z-index selain auto, maka nilai z-index akan menjadi nol.

Bilangan bulat positif atau negatif berarti elemen tersebut akan memiliki nilai z-index tertentu yang bisa dibandingkan dengan elemen lain. Nilai z-index yang lebih tinggi akan menempatkan elemen tersebut di atas elemen lain dengan nilai z-index yang lebih rendah.

Contoh penggunaan z-index:

Hasilnya adalah sebagai berikut:

Dari contoh di atas, kita bisa melihat bahwa elemen dengan class overlay pertama berada di bawah elemen dengan class box karena memiliki nilai z-index -1. Sedangkan elemen dengan class overlay kedua berada di atas elemen dengan class box karena memiliki nilai z-index 1.

Apa itu Stacking Context?

Stacking context adalah konteks yang menentukan bagaimana elemen ditumpuk satu sama lain dalam suatu dokumen. Setiap elemen memiliki stacking context sendiri, dan stacking context bisa bersarang satu sama lain.

Stacking context dibentuk oleh beberapa faktor, seperti:

• Nilai z-index selain auto
• Properti opacity selain 1
• Properti transform selain none
• Properti filter selain none
• Properti perspective selain none
• Properti clip-path selain none
• Properti mask selain none
• Properti isolation bernilai isolate
• Properti mix-blend-mode selain normal
• Properti will-change yang mencakup salah satu properti di atas
• Elemen root (html)
• Elemen dengan properti position fixed atau sticky

Stacking context mempengaruhi cara kerja z-index. Z-index hanya bisa membandingkan elemen yang berada dalam stacking context yang sama. Jika ada dua elemen yang berada dalam stacking context yang berbeda, maka urutan tumpukannya akan ditentukan oleh stacking context induknya.

Contoh pengaruh stacking context:

Hasilnya adalah sebagai berikut:

Dari contoh di atas, kita bisa melihat bahwa meskipun elemen dengan id child2 memiliki nilai z-index lebih tinggi dari elemen dengan id child1, namun ia tetap berada di bawahnya. Hal ini karena elemen dengan id parent membentuk stacking context baru karena memiliki properti opacity selain 1. Sehingga, nilai z-index dari anak-anaknya hanya bisa dibandingkan di dalam stacking context tersebut.

Untuk membuat elemen dengan id child2 berada di atas elemen dengan id child1, kita perlu memberikan nilai z-index untuk elemen dengan id parent yang lebih tinggi dari nol.

Kesimpulan

CSS z-index adalah properti yang digunakan untuk mengontrol posisi relatif elemen dalam tumpukan. Z-index hanya berlaku untuk elemen yang memiliki properti position selain static. Nilai z-index bisa berupa bilangan bulat positif atau negatif, atau kata kunci auto.

Stacking context adalah konteks yang menentukan bagaimana elemen ditumpuk satu sama lain dalam suatu dokumen. Stacking context dibentuk oleh beberapa faktor, seperti nilai z-index selain auto, properti opacity selain 1, dan lainnya. Z-index hanya bisa membandingkan elemen yang berada dalam stacking context yang sama.

Semoga artikel ini bermanfaat untuk Anda yang ingin belajar tentang CSS z-index dan stacking context.