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

Populer Terbaru Komentar

Entri Terbaru

Komentar Terbaru

Creative Commons License
All contents by Iskael is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.
Based on a work at Iskael.
Permissions beyond the scope of this license may be available at Iskael.
© 2013 Belajar Ngeblog bersama Iskael. All Right Reserved. Powered by Blogger. Iskael Template by Iskael. Submitted on TopBlogIndonesia