Pada video kali ini kita mulai dengan source code kosong. Disini saya sudah menyediakan dua buah file source code yaitu z-index.html dan z-index.css. Keduanya masih kosong ya. Pertama kita isikan file HTML terlebih dahulu.

Kita tambahkan HTML Boilerplate. Lalu kita beri judul z-index. Judul pada file HTML harus dituliskan dua kali ya. Pertama pada tag title. Dan yang kedua kita tambahkan lagi tag h1 di dalam body.

Selanjutnya saya akan membuat 3 buah div dengan nama kelas merah, kuning dan hijau. Dengan menggunakan package emmet, kita cukup menuliskan div.merah+div.kuning+div.hijau dan kita tekan tombol Ctrl+E.

Kita simpan dan refresh browser. Yang kelihatan baru judulnya saja ya. Sedangkan ketiga div tidak kelihatan karena belum memiliki konten dan belum kita atur style-nya.

Selanjutnya kita akan menambahkan CSS. Pertama kita tambahkan dahulu tag link di bagian head, dan kita ubah nilai attribute href menjadi z-index.css. Buka file CSS. Pertama kita buat dahulu selector div. Dan kita tambahkan width dan height dengan nilai 300 pixel. Kemudian kita tambahkan kelas merah kuning hijau dan kita atur background color-nya sesuai dengan nama kelas.

Kita simpan dan refresh browser. Sekarang setiap div sudah tampil di browser dalam bentuk kotak dengan warna merah, kuning dan hijau. Ketiga kotak akan tersusun ke bawah.

Lalu kita tambahkan properti position dengan nilai absolute ke selector div. Kita simpan dan refresh browser. Sekarang ketiga kotak berubah menjadi satu buah kotak berwarna hijau.

Kita telah mempelajari mengenai properti position pada video sebelumnya. Dengan menggunakan nilai absolute, maka semua div akan dikeluarkan dari flow dokumen dan secara default akan ditaruh pada posisi yang sama. Jadi di satu kotak berwarna hijau yang kita lihat disini, sebenarnya ada 3 buah kotak yang bersusun ke belakang. Kotak hijau berada di posisi paling depan dan menutupi kedua kotak lainnya.

Mengapa kotak hijau berada di paling depan? Kita lihat lagi ke kode HTML. Kita lihat posisi div dengan kelas hijau berada di paling bawah. Artinya div yang berada di paling bawah dalam kode HTML, akan berada di posisi paling depan.

Apabila kita hendak mengganti posisi kotak merah menjadi paling depan, maka kita bisa memindahkan kode HTML div merah ke paling bawah. Nah, sekarang kotak yang kelihatan di browser adalah kotak merah.

Namun cara ini lebih repot ya, karena kita harus mengubah-ubah posisi tag di dalam kode HTML. Ada cara lain yang lebih mudah, yaitu dengan menggunakan properti z-index pada kode CSS.

Sebagai contoh, saya kembalikan dahulu kode HTML seperti semula. Dan sekarang browser menampilkan kotak hijau. Pada kelas merah, saya tambahkan properti z-index dengan nilai 1. Kita simpan dan refresh browser. Sekarang browser akan menampilkan kotak merah pada posisi paling depan dan menutupi kedua kotak lainnya.

Jadi properti z-index ini berfungsi untuk mengatur elemen mana yang berada di depan, dan elemen mana yang berada di belakang. Untuk menaruh elemen di posisi depan, maka kita memberikan nilai positif pada z-index. Semakin besar nilainya, maka posisi elemen akan menjadi semakin depan. Jadi apabila kita ingin mengatur agar elemen ini menjadi posisi paling depan diantara semua elemen lain, kita bisa memasukkan angka tinggi ke dalam properti z-index ini. Misalkan kita beri nilai 1000.

Agar lebih jelas, kita atur dahulu posisi ketiga kotak agar menjadi cascade. Pertama hapus dahulu properti z-index pada kotak merah. Lalu kita beri top 60 pixel dan left 0 pixel.

Selanjutnya pada kotak kuning kita tambahkan properti top dengan nilai 160 pixel dan left 100 pixel. Sedangkan pada kotak hijau kita tambahkan properti top dengan nilai 260 pixel dan left 200 pixel. Kita simpan dan refresh browser. Nah, sekarang kita sudah bisa melihat susunan kotak pada browser, dengan kotak hijau berada di paling depan, disusul oleh kotak kuning, dan kotak merah pada bagian paling belakang.

Apabila kita ingin kotak hijau berada di belakang, maka kita bisa menambahkan properti z-index dengan nilai negatif. Misalkan saya tambahkan z-index dengan nilai -1. Dan sekarang kotak hijau berada di belakang kotak kuning.

Dan selanjutnya apabila saya ingin agar kotak kuning juga berada di belakang kotak merah. Maka saya bisa menambahkan juga z-index dengan nilai -1 pada kelas kuning.

Nah sekarang posisi kotak apabila dilihat dari depan ke belakang adalah merah, hijau, kuning. Dan apabila saya ingin mengubah agar kotak hijau menjadi dibelakangnya kotak kuning, maka saya bisa mengubah nilai z-index-nya menjadi -2. Sekarang posisi kotak menjadi merah, kuning, hijau. Kotak hijau berada dibelakang kotak kuning, karena nilai z-index kelas hijau lebih minus daripada nilai z-index kelas kuning.

Dengan menggunakan fasilitas tanya jawab, maka Anda bisa bertanya dan akan dijawab langsung oleh instruktur kursus.

Anda belum terdaftar pada kursus ini sehingga tidak bisa mengajukan pertanyaan.