Pada CSS ada property bernama Z-index, apa teman-teman tahu fungsi dari Z-index ini? Oke pada hari ini saya akan share pada teman-teman tentang Mengenal Fungsi Z-index Pada CSS.

Jika kalian sudah pernah memegang software Photoshop keluaran dari Adobe, pasti tahu dengan yang namanya Layer. Ya teman-teman Z-index ini hampir sama seperti penjelasan dengan Layer yang ada di Adobe Photoshop. Contoh, layer muncul di atas layer kedua, karena layer saling bertumpukan. Langsung saja, berikut ulasan dari Mengenal Fungsi Z-index Pada CSS.

Coba teman-teman buat kode html di bawah dan lihat hasil nya,

Mengenal Fungsi Z-index Pada CSS

Mengenal Fungsi Z-index Pada CSS

Mengenal Fungsi Z-index Pada CSS

Nah sekarang teman-teman tambahkan property z-index di CSS di tiap <div id=””>. z-index = 1, z-index = 2, z-index = 3. Hasilnya masih tetap sama seperti sebelum kita tambahkan property z-index.

Mengenal Fungsi Z-index Pada CSS

Kemudian coba ubah yang dari <div id=””> layer_1 ubah z-index nya menjadi z-index = 4, dan lihat hasilnya:

Mengenal Fungsi Z-index Pada CSS

Mengenal Fungsi Z-index Pada CSS

Cukup mudah kan teman-teman untuk Mengenal Fungsi Z-index Pada CSS? Sekian untuk tutorial kali ini, semoga bermanfaat. Terima kasih