CSS Position : Relative, yang sangat penting, tapi sedikit membingungkan

seri fundamental css

sumber gambar : hackermoon

properti Positioning pada css ini sangat penting, jika kita ingin mengubah tata letak dan posisi elemen html yang kita buat itu, sesuai dengan keinginan kita sebagai developer, misalkan dibawah ini, kita punya elemen yang sejajar kebawah dengan kode html:

<div class="con con1">1</div>
<div class="con con2">2</div>
<div class="con con3">3</div>

dan kode css-nya :

.con{
  width: 200px;
  height: 200px;
}
.con1{
  background-color: #7dcff0;
}
.con2{
  background-color: yellow;
}
.con3{
  background-color: #7dcff0;
}

jika kita lihat dalam browser hasilnya :

tiga elemen sejajar ke bawah

pertanyaannya, bagaimana jika kita ingin mengubah posisi kotak warna kuning saja, misal kita ubah posisinya ke bawah 10 pixel dengan cara menambah margin-top : 10px, nah disini masalahnya, ketika kita menambah margin, artinya kita mendorong elemen diatasnya artinya : elemen dibawah warna kuning akan ikut terdorong kebawah.

elemen dibawah warna kuning ikut terdorong kebawah.

karena begitulah perilaku dari margin, ketika kita tambah margin, maka elemen disekitarnya akan berubah, jadi pertanyaannya, bagaimana kita ingin mengatur posisi sebuah elemen, tapi tanpa mempengaruhi elemen disekitarnya ?, disitulah kita butuh properti position, position memungkinkan kita mengubah posisi elemen, tanpa mempengaruhi elemen disekitarnya.

sumber : web programming unpas

contoh elemen yang bukan static adalah, relative, ketika kita set position : relative, maka elemen tersebut menjadi seolah olah keluar dari barisan atau maju satu dimensi, sehingga elemen tersebut bisa kita atur ke -kiri / kanan / atas / bawah tanpa mempengaruhi elemen lain , mari kita coba:

.con2 {
  position: relative;
  background-color: yellow;
  top: 50px;
  left: 50px;
}

begitu kita set property position: relative, maka seolah olah, elemennya menjadi seperti ini :

maju satu dimensi

gambar di atas adalah ilustrasi bagaimana kotak kuning maju satu dimensi ,jika kita lihat dalam browser maka hasilnya seperti ini :

kotak kuning bebas diubah posisi menjadi relatif terhadap posisi aslinya

posisi kotak kuning menjadi relative terhadap posisi aslinya, akhirnya kita bisa mengubah dengan bebas posisi kotak warna kuning ke semua arah tanpa khawatir mengubah elemen yang lain, ada beberapa properti yang juga penting untuk dipahami salah satunya position: absolute, tapi saya akan tulis di artikel yang berbeda,

terimakasih.

Sumber : Web Programming Unpas