Dito PriwantoPada sesi belajar CSS bagian 15, kita telah belajar tentang apa itu properti CSS float. Dalam seri lanjutan belajar CSS bagian ke 16 ini, kita akan belajar mengenal apa itu properti z-index beserta contoh dan penggunaannya. Simak informasi berikut ini.
Mengenal Properti z-index
Z-index adalah properti CSS yang digunakan untuk mengatur dan menentukan urutan tumpukan (stacking order) suatu elemen html pada halaman website, agar tidak saling menumpuk atau tumpang tindih. Properti z-index hanya berfungsi pada elemen yang memiliki properti position dengan nilai selain static, yaitu relative, absolute, fixed, atau sticky.
Untuk menggunakan properti z-index, Anda harus membuat sebuah elemen HTML dengan properti : z-index. Berikut contohnya:
.container{
z-index: auto;
}Penggunaan z-index tidak akan berjalan jika elemen tidak memiliki posisi (position) selain static.
Fungsi Properti z-index
Fungsi utama dari properti z-index dalam CSS adalah untuk mengatur urutan tampilan elemen yang saling bertumpuk di halaman web. Dengan kata lain, z-index menentukan elemen mana yang muncul di depan dan mana yang berada di belakang saat posisi elemen saling menimpa (overlap).
Salah satu contoh fungsi lain yaitu dapat membantu pengguna website untuk berinteraksi dengan elemen yang benar, misalnya memastikan tombol floating agar tetap berada di paling depan dan tidak tertutup dengan elemen lain.
Cara Kerja
Berikut adalah cara kerja dari properti CSS z-index:
- Semakin besar nilai z-index, maka semakin depan posisi elemen tersebut.
- Semakin kecil atau negatif nilai z-index, maka semakin belakang posisi elemen tersebut.
Nilai Properti
Berikut adalah nilai properti yang sering digunakan :
- Auto: Menggunakan urutan tumpukan default (mengikuti urutan HTML).
- Angka positif: Elemen akan muncul lebih depan dibanding elemen dengan angka lebih kecil.
- Angka negatif: Elemen akan muncul di belakang elemen lain atau kurang dari angka positif.
Contoh Implementasi dan Penggunaan
Berikut adalah contoh script lengkap penggunaan properti z-index yang telah diterapkan ke kode html.
<!DOCTYPE html>
<html>
<head>
<title>Contoh CSS z-index</title>
<style>
.box1 {
position: absolute;
top: 50px;
left: 50px;
width: 200px;
height: 200px;
background-color: red;
z-index: 1;
}
.box2 {
position: absolute;
top: 100px;
left: 100px;
width: 200px;
height: 200px;
background-color: blue;
z-index: 2;
}
.box3 {
position: absolute;
top: 150px;
left: 150px;
width: 200px;
height: 200px;
background-color: green;
z-index: 3;
}
.box4 {
position: absolute;
top: 200px;
left: 200px;
width: 200px;
height: 200px;
background-color: yellow;
z-index: 4;
}
</style>
</head>
<body>
<div class="container clearfix">
<div class="box1">Box Merah</div>
<div class="box2">Box Biru</div>
<div class="box3">Box Hijau</div>
<div class="box4">Box Kuning</div>
</div>
</body>
</html>Dan jika di test akses melalui browser, maka tampilannya akan menjadi seperti ini:
Dari screenshoot di atas, elemen dengan box warna merah memiliki nilai z-index yaitu 1, sedangkan pada elemen dengan box warna kuning memiliki nilai z-index lebih besar yaitu 4. Hal ini akan membuat elemen pada box warna kuning berada di depan dengan elemen lain.
Kesimpulan
Properti z-index sangat penting dalam desain antarmuka web, terutama untuk mengatur lapisan elemen seperti modal, tooltip, menu dropdown, floating button dan elemen interaktif lainnya. Dengan memahami cara kerja z-index, kita bisa memastikan elemen-elemen tampil dalam urutan tumpukan yang tepat dan sesuai keinginan.
Demikian seri belajar CSS bagian 16 tentang properti z-index pada CSS. Ikuti terus seri belajar CSS dari Rumahweb Indonesia yang kami publikasi setiap satu bulan sekali. Semoga bermanfaat.
