Pada video ini, kita akan mempelajari mengenai properti position, yang bisa kita gunakan untuk mengatur browser agar menampilkan tag kita di posisi tertentu yang sesuai dengan keinginan kita. Properti position ini sangat penting dalam pelajaran css layout, namun sering kali terjadi kebingungan pada saat hendak menggunakannya. Dari nama nilainya saja sudah membingungkan dan memunculkan banyak pertanyaan. Apakah itu static? Apakah itu relative? Apakah itu absolute? Apa bedanya static dengan fixed?

Oleh karena itu kita akan membahas nilai dari properti position ini satu per satu, agar kita dapat mengerti bagaimana konsep dan cara penggunaannya. Pada video ini kita akan fokus ke nilai static dan relavite terlebih dahulu, sedangkan nilai absolute, fixed dan sticky akan dibahas pada video berikutnya.

Setelah mengatur nilai properti position, kita akan menggunakan beberapa properti lain untuk mengatur posisi dari tag kita. Properti top digunakan untuk memberikan jarak diatas tag, bottom untuk bagian bawah, left untuk bagian kiri, dan right untuk bagian kanan. Sedangkan properti z-index digunakan untuk mengatur apakah tag ini ditampilkan di depan atau dibelakang tag lainnya.

Oke, pada pelajaran ini kita mulai dari halaman HTML kosong ya. Pertama kita tambahkan dahulu tag h1, dengan konten Latihan Position.

Kemudian kita tambahkan tiga buah div dengan nama kelas merah, kuning, hijau. Dengan menggunakan package Emmet, kita cukup menuliskan .merah saja, lalu tekan ctrl+e. Kita ulangi untuk kuning dan hijau.

Kita simpan dan refresh browser. Yang kelihatan hanya judulnya saja ya. Sedangkan ketiga div tidak kelihatan karena belum ada isi. Selanjutnya kita akan menambahkan kode css untuk ketiga div.

Pertama kita gunakan selector div terlebih dahulu. Jadi properti yang kita atur disini akan berpengaruh ke ketiga div. Kita tambahkan properti width:200px dan height: 200px.

Setelah itu kita tambahkan selector untuk kelas merah, kuning dan hijau, untuk mengatur background color-nya sesuai dengan nama kelasnya.

Kita simpan dan refresh browser. Dan sekarang kita bisa melihat ketiga div kita, yang bentuknya kotak dengan warna sesuai dengan nama kelasnya.

Sekarang kita membahas mengenai position dengan nilai static. Nilai static ini adalah nilai default yang digunakan di semua tag HTML kita. Dengan menggunakan nilai static, artinya kita menyerahkan pengaturan posisi tag sepenuhnya kepada browser. Dan browser akan menggambarkan tag kita sesuai dengan urutannya pada kode HTML.

Sebagai contoh, kita lihat kembali kode HTML kita. Setelah memasuki tag body, maka yang pertama kali ditemukan oleh browser adalah tag H1 Latihan Position. Jadi tag ini digambarkan terlebih dahulu di bagian paling atas halaman kita. Berhubung tag H1 bersifat blocking, maka browser harus pindah ke baris berikutnya untuk menggambarkan tag berikutnya, yaitu tag div merah. Dan berhubung tag div juga bersifat blocking, maka browser berpindah lagi ke baris berikutnya untuk menggambarkan tag div kuning. Dan seterusnya.

Jadi urutan dan posisi dari tag yang ditampilkan oleh browser ini akan bergantung dari urutan tag-nya di dalam kode HTML. Kalau misalkan kita hendak memindahkan div kuning ke atas div merah, maka kita pindahkan kode HTML div kuning menjadi sebelum div merah. Kita simpan dan refresh browser. Sekarang kotak kuning berada diatas kotak merah. Kita kembalikan posisi kotak kuning ke tengah.

Apabila kita menambahkan properti position dengan nilai static ke dalam kelas .kuning, maka tidak ada perubahan apa-apa pada tampilan browser. Dan berhubung kita menyerahkan posisi tag sepenuhnya diatur oleh browser, maka kita tidak bisa menggunakan properti top, bottom, left, dan right. Sebagai contoh, kita tambahkan properti left dengan nilai 200px. Kita simpan dan refresh browser. Tidak ada perubahan apa-apa ya.

Untuk menggeser posisi kotak kuning ke kanan, kita bisa menggunakan properti margin-left seperti yang telah kita pelajari pada video sebelumnya. Sekarang posisi dari kotak kuning telah bergeser ke kanan.

Atau untuk menggeser posisi kotak kuning ke bawah, kita bisa tambahkan lagi properti margin-top misalkan sebesar 50px. Sekarang kotak kuning telah bergeser ke bawah sebanyak 50 pixel. Namun perhatikan posisi kotak hijau ikut bergeser ke bawah juga ya.

Nah, sekarang kalau misalkan kita ingin menggeser posisi kotak kuning, namun kita ingin agar kotak hijau tetap di posisi semula. Bagaimana caranya? Disinilah kita menggunakan position relative. Sebagai contoh, kita ubah nilai position dari static menjadi relative. Lalu kita hapus kedua properti margin.

Kita simpan dan refresh browser. Pada saat ini masih belum ada perubahan ya, karena kita belum mengatur lebih lanjut posisi dari kotak kuning. Untuk menggeser kotak kuning ke kanan, kita bisa menggunakan properti left, misalkan kita isi dengan nilai 300px. Kita simpan dan refresh browser.

Konsep dari cara menggunakan properti left ini mirip dengan cara menggunakan properti margin-left ya. Jadi apabila kita menggunakan properti left dengan nilai 300px, artinya browser akan menambahkan jarak di sebelah kiri tag sebanyak 300 pixel, sehingga posisi tag akan bergeser ke sebelah kanan. Kita juga bisa menggunakan properti left untuk menggeser tag ke kiri, dengan cara menggunakan nilai negatif.

Mengapa nama nilai propertinya relative? Karena dalam menentukan posisi tag, browser akan membandingkannya secara relative terhadap posisi asli dari tag tersebut pada saat static. Jadi kalau kita lihat posisi kotak kuning sebelum kita ubah, seharusnya posisinya seharusnya berada diantara kotak merah dan hijau. Dengan menambahkan properti left sebanyak 300 pixel, maka browser akan menambahkan jarak pada sisi kiri kotak kuning, sehingga akan bergeser ke kanan sejauh 300 pixel.

Walaupun kotak kuning sekarang ditampilkan di sebelah kanan, namun browser tetap membayangkan bahwa kotak kuning tersebut tetap berada diantara kotak merah dan hijau. Jadi pada bagian sini seolah-olah ada bayangan kotak kuning. Akibatnya, kotak hijau tidak naik ke atas untuk menempati ruang kosong yang ditinggalkan oleh kotak kuning.

Sebagai contoh berikutnya, kita tambahkan properti top dengan nilai 200 pixel. Kita simpan dan refresh browser. Sekarang posisi kotak kuning akan bergeser ke bawah, sehingga berada di samping kanan kotak hijau. Jadi inilah perbedaan antar menggunakan margin-top dan top. Kalau kita menggunakan top dengan position relative, maka browser mengganggap bahwa kotak kuning tetap berada diantara kotak merah dan hijau, sehingga browser tidak menggeser posisi dari kotak hijau. Sedangkan kalau kita menggunakan margin-top, maka posisi kotak hijau akan turut bergeser.

Nah, sekarang untuk latihan position relative, pertama teman-teman harus memiliki dahulu source code seperti di layar saya sekarang. Ini hanya source code sederhana ya, jadi apabila teman-teman bisa mengetikkannya sendiri di komputer masing-masing sambil mengikuti video ini. Atau kalau ingin lebih mudahnya, bisa unduh source code dari link yang akan saya cantumkan di deskripsi video.

Dari source code yang sekarang, kita akan membuat posisi kotaknya menjadi seperti ini. Jadi ketiga kotak akan tersusun ke samping. Dan perhatikan urutan warnanya adalah kuning, hijau, dan merah. Dan kalau kita perhatikan diantara kotak kuning dan hijau ada sedikit white space, untuk latihan kali ini jangan dipermasalahkan ya. Kita abaikan dahulu masalah white space ini.

Sekarang teman-teman bisa pause video ini terlebih dahulu. Nantinya setelah selesai baru melanjutkan video ini, dan kita akan melihat bagaimana cara mengerjakannya bersama-sama.

Oke, sekarang kita akan mengerjakan soal latihan kita. Pertama kita buka dahulu kode CSS-nya. Kita hapus properti position, left dan top dari kelas kuning. Sekarang posisi ketiga kotak berurutan kebawah. Untuk mengubah urutan kotak menjadi ke samping, maka kita tambahkan properti display: inline-block pada selector div.

Sekarang ketiga kotak berurutan ke samping. Namun perhatikan bahwa diantara kotak terdapat satu buah spasi. Hal ini terjadi karena pada kode HTML kita, diantara div penutup yang satu dengan div pembuka lainnya masih terdapat white space. Apabila kita ingin menghilangkan ketiga spasi, maka triknya adalah menghapus semua white space tersebut, sehingga ketiga div berada dalam satu baris kode html. Namun hal ini menyebabkan penulisan kode html kita menjadi lebih sulit untuk dibaca. Jadi untuk latihan kali ini, kita abaikan dahulu masalah spasi antar kotak.

Sekarang ketiga kotak berurutan ke samping dengan warna merah kuning hijau ya. Namun dalam latihan ini, kita hendak mengubah warna kotak menjadi kuning hijau merah. Oleh karena itu kita harus mengubah posisi dari kotak. Pertama kita tambahkan dahulu position: relative pada selector div.

Lalu yang pertama kita geser posisi kotak merah ke sebelah kanan. Kita bisa menambahkan properti left sebesar 400 pixel pada selector kelas merah. Sekarang posisi kotak merah sudah bergeser ke sebelah kanan, namun karena posisinya berada dibelakang kotak hijau maka kotak merah hanya kelihatan sedikit pada spasi antara kotak kuning dan hijau.

Selanjutnya kita geser kotak kuning ke kiri. Kita bisa menggunakan properti right : 200px pada selector kelas kuning.

Dan yang terakhir kita geser kotak hijau ke tengah. Kita bisa menggunakan properti right:200px pada selector kelas hijau.

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.