Tata Letak CSS - Properti indeks-z
Properti z-indexmenentukan urutan tumpukan elemen.
Properti indeks-z
Ketika elemen diposisikan, mereka dapat tumpang tindih dengan elemen lain.
Properti z-indexmenentukan urutan tumpukan elemen (elemen mana yang harus ditempatkan di depan, atau di belakang, yang lain).
Sebuah elemen dapat memiliki urutan tumpukan positif atau negatif:
Ini adalah judul
Karena gambar memiliki z-index -1, maka akan ditempatkan di belakang teks.
Contoh
img
{
position: absolute;
left: 0px;
top: 0px;
z-index: -1;
}
Catatan: z-index hanya berfungsi pada elemen yang diposisikan (posisi: absolut, posisi: relatif, posisi: tetap, atau posisi: lengket) dan item fleksibel
(elemen yang merupakan turunan langsung dari tampilan: elemen fleksibel).
Contoh indeks-z lainnya
Contoh
Di sini kita melihat bahwa elemen dengan urutan tumpukan yang lebih besar selalu di atas elemen dengan urutan tumpukan yang lebih rendah:
<html>
<head>
<style>
.container {
position: relative;
}
.black-box {
position: relative;
z-index: 1;
border: 2px solid black;
height: 100px;
margin: 30px;
}
.gray-box {
position: absolute;
z-index: 3;
background: lightgray;
height: 60px;
width: 70%;
left: 50px;
top: 50px;
}
.green-box {
position: absolute;
z-index: 2;
background: lightgreen;
width: 35%;
left: 270px;
top: -15px;
height:
100px;
}
</style>
</head>
<body>
<div class="container">
<div
class="black-box">Black box</div>
<div class="gray-box">Gray
box</div>
<div class="green-box">Green box</div>
</div>
</body>
</html>
Tanpa indeks-z
Jika dua elemen yang diposisikan saling tumpang tindih tanpa z-index
ditentukan, elemen yang ditentukan terakhir dalam kode HTML akan ditampilkan di atas.
Contoh
Contoh yang sama seperti di atas, tetapi di sini tanpa indeks-z yang ditentukan:
<html>
<head>
<style>
.container {
position: relative;
}
.black-box {
position: relative;
border: 2px solid black;
height: 100px;
margin: 30px;
}
.gray-box {
position: absolute;
background: lightgray;
height: 60px;
width: 70%;
left: 50px;
top: 50px;
}
.green-box {
position: absolute;
background: lightgreen;
width: 35%;
left: 270px;
top: -15px;
height:
100px;
}
</style>
</head>
<body>
<div class="container">
<div
class="black-box">Black box</div>
<div class="gray-box">Gray
box</div>
<div class="green-box">Green box</div>
</div>
</body>
</html>
Properti CSS
| Property | Description |
|---|---|
| z-index | Sets the stack order of an element |