Halo teman-teman semuanya! Setelah mempelajari berbagai unit ukuran dalam CSS, kali ini kita akan membahas sesuatu yang sangat penting dalam dunia desain web: layering atau penumpukan elemen, yang dikontrol dengan properti z-index.
Dalam sebuah halaman web, elemen bisa saling menumpuk — misalnya popup muncul di atas konten, atau dropdown menu menutup bagian lain. Nah, untuk mengatur elemen mana yang muncul di depan atau di belakang, kita gunakan z-index.
Apa Itu Layering?
Layering atau penumpukan elemen terjadi saat beberapa elemen HTML memiliki posisi yang sama atau saling menutupi. Urutan elemen dalam tumpukan (stacking order) dapat diatur menggunakan properti:
z-index
Syarat Utama: Elemen Harus Punya position
Untuk bisa menggunakan z-index, elemen harus memiliki properti position seperti:
relativeabsolutefixedsticky
Cara Kerja z-index
- Nilai
z-index adalah angka bulat (positif, negatif, atau nol).
- Semakin besar nilainya, semakin di depan elemen itu ditampilkan.
- Elemen dengan
z-index lebih kecil akan berada di belakang.
Contoh:
.box1 {
position: absolute;
z-index: 1;
}
.box2 {
position: absolute;
z-index: 10;
}
Di sini, .box2 akan berada di atas .box1 karena 10 > 1.
Nilai Negatif pada z-index
Ya, z-index juga bisa bernilai negatif, artinya elemen akan ditempatkan lebih jauh di belakang elemen lain, bahkan bisa tersembunyi jika tertimpa.
.box {
position: relative;
z-index: -1;
}
Contoh Lengkap
Contoh berikut menunjukkan dua kotak yang saling tumpang tindih dengan urutan yang dikontrol oleh z-index.
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>Contoh Z-index</title>
<style>
.container {
position: relative;
height: 200px;
background-color: #f1f1f1;
}
.box1, .box2 {
width: 150px;
height: 150px;
position: absolute;
top: 25px;
}
.box1 {
left: 50px;
background-color: lightblue;
z-index: 1;
}
.box2 {
left: 100px;
background-color: tomato;
z-index: 10;
}
</style>
</head>
<body>
<h1>Contoh Layering dengan Z-index</h1>
<div class="container">
<div class="box1">Kotak 1 (z-index: 1)</div>
<div class="box2">Kotak 2 (z-index: 10)</div>
</div>
</body>
</html>
Dua kotak dengan posisi absolut saling tumpang tindih. Kotak merah (.box2) memiliki z-index yang lebih besar, sehingga muncul di atas kotak biru (.box1). Urutan ini bisa dibalik hanya dengan menukar nilai z-index.
Kesimpulan
Dengan z-index, kita bisa mengatur urutan tampilan elemen saat mereka saling menumpuk. Elemen dengan z-index lebih tinggi akan berada di atas, dan properti ini hanya berlaku jika elemen memiliki position selain static.
Terima Kasih