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
Setelah Menggunakan Z-index
Setelah melihat demo z-index di atas, apakah kamu sudah paham kegunaan z-index? Jika belum paham, silakan mencoba sendiri. Selamat mencoba :)
Perlu dicatat bahwa properti 'z-index' hanya akan bekerja jika properti 'position' objek terkait telah di definisikan.
ReplyDeletehehe, makasih udah diingetin :D
Deleteiya emang harus ada position, kalo ga ya ga keliatan bedanya
ini cara pasangnya dimana mas ?
ReplyDeletedipasang di bagian CSS-nya
Deleteadakah pengaruh z-index terhadap elmen di dalamnya, seperti link?
ReplyDeleteiya berpengaruh juga, jika link nya diatur display: block atau inline-block
Delete