Cara menggunakan position: absolute css

Oke, pada pelajaran ini kita mulai dari halaman HTML seperti pelajaran sebelumnya, namun tanpa properti yang berhubungan dengan position.

Bisa dilihat disini bahwa pada kode HTML, bagian paling atas adalah tag H1 dengan konten Latihan Position. Diikuti oleh 3 buah div dengan kelas merah, kuning, hijau.

Dan kemudian di kode CSS, semua div diberi lebar dan tinggi sebesar 200 pixel. Sedangkan masing-masing kelas merah, kuning, hijau diberikan background-color yang sesuai dengan nama kelasnya.

Kita bisa lihat hasilnya pada browser. Bagian paling atas adalah judul Latihan Position. Lalu diikuti dengan 3 buah kotak merah, kuning, hijau yang disusun secara vertikal.

Kita akan belajar mengenai position absolute. Kita tambahkan properti ini di kelas kuning. Kita simpan dan refresh browser. Sekarang kotak hijau menjadi hilang. Mengapa? Karena pada saat kita mengganti kotak kuning menjadi absolute, maka kotak kuning dianggap keluar dari flow HTML dan kotak hijau akan berpindah menggantikan posisi kotak kuning. Jadi sebenarnya kotak hijau masih ada, namun karena posisinya berada dibelakang kotak kuning, maka tidak kelihatan.

Sekarang kita tambahkan properti left sebesar 200px pada kelas kuning. Kita simpan dan refresh browser. Browser menambahkan jarak sebesar 200px pada bagian kiri kotak kuning, sehingga kotak kuning akan bergeser ke kanan. Di belakang kotak kuning, kita bisa melihat sebagian kotak hijau.

Kalau kita lihat pada ujung kotak merah, kita bisa melihat bahwa kotak kuning sedikit menjorok ke dalam kotak hijau. Mengapa begitu? Karena dengan menggunakan absolute, maka browser menghitung jarak 200 pixel dibandingkan ke elemen body. Sedangkan kita bisa lihat disini bahwa pada bagian kiri bodi terdapat sedikit margin. Margin inilah yang membuat posisi kotak kuning sedikit masuk ke dalam kotak hijau.

Kita bisa merapikan posisi kotak dengan cara membuang margin pada body. Caranya kita tambahkan selector body dan kita beri properti margin dengan nilai 0. Kita simpan dan refresh browser. Sekarang pada body sudah tidak ada margin dan ketiga kotak tersusun dengan rapi. Perhatikan bahwa posisi kotak kuning tetap berada di sebelah kiri, pada saat saya memperbesar dan memperkecil layar browser.

Sekarang kita ganti properti left menjadi right dengan nilai 50px. Kira-kira kotaknya akan berpindah kemana nih? Kita simpan dan refresh browser. Ternyata kotak berpindah ke bagian kanan layar. Mengapa? Karena browser menambahkan jarak 50 pixel dibandingkan ke sisi paling kanan body. Jadi kalau kita lihat disini, diantara sisi paling kanan kotak kuning dengan sisi paling kanan bodi, disini diberikan jarak sebesar 50 pixel. Perhatikan kalau saya memperbesar dan memperkecil browser, kotak kuning tetap berada di sebelah kanan.

Kalau saya tambahkan properti bottom dengan nilai 10px. Maka kotak kuning akan berpindah ke bagian paling bawah bodi. Dan akan tetap berada di bagian paling bawah pada saat saya memperbesar dan memperkecil ukuran browser.

Sedangkan kalau saya ganti bottom menjadi top, maka sekarang kotak kuning akan menjadi berada di bagian atas bodi.

Jadi dari yang telah kita pelajari pada video ini, kita bisa mengambil beberapa perbedaan mengenai position relative dan position absolute. Yang pertama, pada position relative kotak kuning akan dianggap tetap berada di posisi awal sehingga kotak hijau tidak naik keatas. Sedangkan pada position absolute, kotak kuning dianggap keluar dari flow HTML dan kotak hijau akan naik ke atas untuk mengisi tempat yang ditinggalkan oleh kotak kuning.

Perbedaan yang kedua. Pada position relative, coordinate property seperti top, bottom, left dan right akan dihitung dari posisi awal elemen dalam flow HTML. Sedangkan pada position absolute, coordinate properties akan dihitung dari element parentnya, dalam contoh disini adalah elemen body.

Dan sekarang kita masuk ke soal latihan. Saya hapus kembali semua perubahan pada kode CSS dan posisi kotak kembali ke posisi semula. Kita akan latihan untuk mengubah posisi kotak menjadi seperti ini. Ketiga kotak akan tersusun secara diagonal, dengan urutan kuning, hijau, dan yang terakhir adalah merah.

Berhubung kode HTML dan CSS yang kita gunakan disini masih sederhana, teman-teman dapat mengetikkan sendiri kode HTML dan CSS awalnya. Atau kalau mau lebih mudah bisa mengunduh source code awal dari link yang saya cantumkan pada deskripsi video. Pause terlebih dahulu video ini dan kerjakan soal latihan pada komputer masing-masing. Kita akan kembali lagi untuk membahas solusi dari latihan ini.

Oke, sekarang kita akan mengerjakan soal latihan kita. Pertama pada selector div, kita tambahkan dahulu position absolute. Position absolute ini akan berlaku pada ketiga kotak kita, sehingga ketiga kotak dikeluarkan dari flow HTML dan ditumpuk di satu tempat yang sama.

Kita akan atur posisi dari masing-masing kotak dengan menggunakan koordinat top dan left. Pertama pada kotak merah kita tambahkan dahulu top 400px dan left 400px, sehingga kotak merah akan berpindah ke bagian paling bawah diagonal.

Kemudian kotak kuning kita atur agar menjadi paling atas. Top 0 dan left 0.

Sedangkan kotak hijau kita atur menjadi di tengah, dengan top 200px dan left 200px.

Sekarang ketiga kotak sudah tersusun secara diagonal dan sesuai dengan soal latihan kita. Namun posisinya masih terlalu atas sehingga menutup tulisan judul. Kita geser sedikit ke bawah dengan cara menambahkan ketiga nilai top sebanyak 50 px.

Ternyata masih kurang bawah ya. Kita tambahkan lagi sehingga menjadi 80px. Dan sekarang posisinya sudah sesuai dengan soal latihan kita.

Namun kalau kita perhatikan disini, untuk mengubah posisi kotak lebih repot ya. Karena kita mesti mengubah nilai top dari ketiga kotak. Ada solusi lain yang lebih gampang dan lebih disarankan untuk digunakan.

Caranya? Pertama kita buka kembali kode HTML kita. Dibawah tag h2, kita tambahkan satu buah tag section dengan kelas container. Lalu kita pindahkan ketiga div ke dalam section.

Kita simpan dan refresh browser. Tidak ada perubahan ya. Karena posisi kotak masih tetap dihitung dari elemen body, karena position dari section masih bernilai static. Oleh karena itu kita mesti menambahkan kode CSS, dengan selector kelas container dan kita berikan properti position: relative.

Bagi yang bertanya, mengapa kita menggunakan section sebagai container, mengapa tidak menggunakan div? Jawabannya adalah karena dalam kode CSS kita sudah ada selector div, sehingga kalau menggunakan container div maka akan terpengaruh oleh kode CSS ini. Jadi disini kita gunakan section sebagai container.

Sekarang posisi dari ketiga kotak sudah dihitung dari containernya. Sehingga kita bisa menghilangkan tambahan nilai top sebesar 80px tadi.

Dan sekarang untuk menggeser posisi ketiga kotak, caranya menjadi lebih gampang. Kita cukup mengubah containernya saja. Misalkan saya tambahkan top sebesar 30px. Posisi dari ketiga kotak akan ikut berubah.

Apa itu Position Absolute pada CSS?

Apa perbedaan position absolute dengan relative?

Apa saja property CSS yang digunakan untuk positioning?

Manakah nilai default untuk properti position?