1 Agt 2014

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 :)

4 komentar:

  1. Perlu dicatat bahwa properti 'z-index' hanya akan bekerja jika properti 'position' objek terkait telah di definisikan.

    BalasHapus
    Balasan
    1. hehe, makasih udah diingetin :D
      iya emang harus ada position, kalo ga ya ga keliatan bedanya

      Hapus