z-index mengatur tumpukan elemen.

Fungsi Z-INDEX dan penggunaanya.

Z-INDEX mengatur urutan elemen yang bertumpuk. Elemen bertumpuk biasanya disebabkan karena terdapat elemen yang menggunakan properti position dengan value fixed / absolute

Elemen yang paling besar z-index-nya, maka elemen tersebut berada di paling luar.

DEMO :

/*-- kode HTML Demo --*/
<div class='sekat'>
    <div class='lapis1'>lapisan 1</div>
    <div class='lapis2'>lapisan 2</div>
    <div class='lapis3'>lapisan 3</div>
</div>
    

lapisan 1
z-index: 2

lapisan 2
z-index: 1

lapisan 3
z-index: 0

Dibawah ini pengaturan CSS demo :

.sekat {position: relative;}
.sekat > div{
padding-left:5px;
padding-right:5px;
line-height:2em;
color:#fff;
border:2px solid #ddd;
box-shadow:0 2px 6px #777;
position:absolute
}

.lapis1 {
background:#555;
width:100%;
height:70px;
top:5px;
z-index:2
}

.lapis2 {
background:#dc143c;
width:fit-content;
padding-top:50px;
height:100%;
left:45%;
z-index:1
}

.lapis3 {
background:teal;
width:100%;
height:70px;
bottom:5px;
z-index:0
}

⇐ Sebelumnya

Selanjutnya ⇒