Kegunaan Z-index pada CSS

Bagi kamu yang baru belajar CSS, suatu saat kamu akan menemukan sebuah properti di CSS yang bernama z-index. Z-index pada CSS digunakan untuk mengatur kedalaman sebuah elemen HTML.

Mudahnya, sebuah laman HTML itu dibentuk berdasarkan lapisan-lapisan (layer) elemen HTML. Elemen yang kodenya ditulis terlebih dahulu letaknya berada di paling bawah. Sebaliknya, elemen yang kodenya ditulis terakhir berada di bagian atas.

Berikut ini adalah salah satu contoh penggunaan z-index pada demo laman HTML. Saya tambahkan "z-index: 1;" pada bagian yang berwarna merah dan saya tambahkan "z-index: -1;" pada bagian yang berwarna kuning.

Sebelum Menggunakan Z-index

See the Pen GbqfK by Iskandar Dzulkarnain (@iskael) on CodePen.

Setelah Menggunakan Z-index

See the Pen wrACe by Iskandar Dzulkarnain (@iskael) on CodePen.

Setelah melihat demo z-index di atas, apakah kamu sudah paham kegunaan z-index? Jika belum paham, silakan mencoba sendiri. Selamat mencoba :)