Perbedaan CSS Position Absolute & Position Relative

Konsep Position Absolute dan Position Relative harus dipahami oleh seorang web designer atau front end. Karena dengan memahaminya kita bisa dengan mudah mengatur letak dari setiap elemen dalam web yang kita buat.
Dipostingan ini selain source code, saya sertakan juga tampilan dari web yang belum dan yang sudah di atur posisinya. Sebelumnya kita mulai dari yang belum diatur posisinya.

sebelum di atur posisinya

Perlu diketahui kotak yang berwarna hijau adalah induk container / pembungkus bagi kotak kecil yang berwarna biru,ungu,dan kuning.
Saat belum di atur positionya, kotak kecil berjejer kebawah dengan rapi, nanti kita lihat perbedaanya ketika kotak kecil kita atur posititionya, baik secara absolute atau seara relative.

1. Position: relative

Ketika kotak kecil kita atur positionnya relative, maka memungkinkan kita untuk merubah posisinya sesuai keinginan kita baik itu top, bottom,left dan right dari posisi semula. Tapi kotak kecil itu masih tetap berada dalam div pembungkusnya, dalam kasus ini adalah kotak besar berwarna hijau.
Contoh kita mau atur kotak 2 yang berwarna ungu dengan position relative, yang akan terjadi adalah tempat awal kotak 2 akan kosong, kotak 2 akan melayang sesuai posisi yang kita tentukan. Untuk lebh jelasnya kita lihat source code dan tampilannya.

position: relative

2. Position:absolute

Saat kotak 2 yang bewarna ungu diberi position:absolute, maka kotak 2 akan keluar dari pembungkusnya atau div yang membungkusnya yaitu  kotak besar yang berwarna hijau, kotak 2 akan berada di pojok kiri atas dari halamn web sesuai nilai top dan left yang kita tentukan, dan posisi dari kotak 2 akan digantikan oleh kotak 3.
Lebih jelasnya bisa lihat source code dan hasil tampilannya.

position : absolute

3. Bagaimana jika div pembungkus kita tentukan positionya : relative

yang akan terjadi pada kotak 2 yang positionya absolute ketika pembungkusnya di tentukan positionya relative, maka kota 2 akan tetap berada dalam div pembungkusnya dan posisinya dimulai dari pojok kiri atas pembungkusnya.
Lebih jelasnya bisa lihat gambar di bawah ini :

Demikianlah penjelasan dari position absolute dan position relative semoga penjelasan di atas bisa di pahami sama teman-teman, jika ada pertanyaan silhkan ajukan di komentar ya. Terima kasih.

Share :