Aturan z-index

Saat kita membuat beberapa elemen HTML dengan z-index yang berbeda-beda,
kita berpikir hasilnya akan muncul mulai dari elemen z-index terkecil di paling bawah, kemudian diatasnya elemen z-index lebih besar dan seterusnya.

Tapi ternyata itu tidak terjadi, kenapa?

Saya akan membahas alasan hal tersebut tidak terjadi.




Saya beri contoh terdapat HTML seperti berikut.

Jika dilihat dari z-index ketiga box tersebut, mungkin Anda akan mengira akan tampil .red -> .lime -> .green.

Tapi ternyata hasilnya adalah .lime -> .red -> .green.

Kenapa?

.red berada daam .green,
sehingga .red akan tampil diatas .green.

Akan tetapi,
.lime akan tetap di atas .red walau z-indexnya kalah besar dari .red,
karena z-index dari parent .red, yaitu .green adalah lebih kecil dari z-index .lime.

Untuk membuatnya tampil menjadi .red -> .lime -> .green, Anda harus memindah .red sehingga menjadi sibling dari kedua elemen lainnya.

Kesimpulan 

Aturan z-index adalah:

sibling/ elemen saudara lebih didahulukan daripada parent and children/ induk dan turunan.

Sebesar apapun z-index suatu elemen, bila z-index induk/parent nya kecil, tak akan tampil diatas elemen yang z-indexnya lebih besar dari z-index induk/parent elemen tersebut.

--

Jangan lupa, z-index hanya berlaku di position: relative, absolute, atau fixed.