Properti z-index bergunakan untuk menentukkan posisi elemen HTML yang ditumpuk. Ini seperti index dalam layering dalam aplikasi editor foto yang bisa kalian tukar-tukar urutannya. Saat menggunakan z-index, nilai dari properti position bisa berupa absolute, fixed, atau sticky. Kalian tidak bisa menggunakan z-index untuk properti yang bernilai relative.
<HTML>
<HEAD>
<TITLE>Belajar HTML</TITLE>
<style>
body div {
color : red;
border : dotted 2px orange;
width : auto;
height : auto;
box-sizing : border-box;
padding : 4px;
position : absolute;
opacity : 90%;
}
.kontainer1{
background : gold;
top : 0%;
left : 0%;
z-index : 2;
}
.kontainer2{
background : green;
top : 20%;
left : 20%;
z-index : 3;
}
.kontainer3{
background : orange;
top : 30%;
left : 30%;
z-index : 2;
}
</style>
</HEAD>
<BODY>
<div style="position:fixed">
<h2>Fixed</h2>
</div>
<Div class="kontainer1">
<h3>kontainer ke-1</h3>
<p>
Ini adalah kalimat ke-1. Ini adalah kalimat ke-2. Ini adalah kalimat ke-3. Ini adalah kalimat ke-4. Ini adalah bagian pertama.
</p>
</div>
<div class="kontainer2">
<h3>kontainer ke-2</h3>
<p>
Ini adalah kalimat ke-1. Ini adalah kalimat ke-2. ini adalah kalimat ke-3. Ini adalah kalimat ke-4. Ini adalah bagian ke-2.
</p>
</div>
<div class="kontainer3">
<h3>kontainer ke-3</h3>
<p>
Ini adalah kalimat ke-1. Ini adalah kalimat ke-2. Ini adalah kalimat ke-3. Ini adalah kalimat ke-4. Ini adalah bagian pertama.
</p>
</div>
</BODY>
</HTML>
Coba ubah nilai properti z-index. Angkanya tidak harus berurutan. Kalian bisa menggunakan angka acak. Kalian tidak seharusnya menggunakan angka yg sama untuk nilai z-index, jika parent-nya sama, kecuali kalian ingin hasilnya berantakan.