CARA MENGATUR POSISI GAMBAR DI CSS

CSS atau Cascading Style Sheets adalah bahasa style sheet yang digunakan untuk mendeskripsikan tampilan dan format sebuat dokumen yang ditulis dalam bahaasa markup. Salah satu kegunaannya adalah untuk mengatur posisi gambar di halaman web. Posisi gambar dapat diatur dengan berbagai cara. Berikut adalah beberapa cara mengatur posisi gambar dalam CSS.

Menggunakan Properti Float dan Clear

Properti float dalam CSS memungkinkan kamu untuk mengatur posisi gambar agar berada disebelah kiri ataupun kanan teks. Untuk menggunakan ini, kamu dapat menambahkan style float: left; atau float: right; pada elemen gambar.

img {
  float: left;
}

Properti clear digunakan untuk mencegah elemen lain berada di sisi kiri atau kanan elemen yang difloat. Misalnya, jika kamu tidak ingin ada teks atau elemen lain disebelah gambar, kamu bisa menambahkan style clear: both; pada elemen tersebut.

p {
  clear: both;
}

Menggunakan Properti Position

Properti position dapat digunakan untuk mengatur posisi gambar dengan sangat spesifik. Ada empat jenis nilai dari properti position, yaitu static, relative, absolute dan fixed.

Static

Pasangan nilai default pada properti position adalah static. Dengan properti ini, posisi gambar diatur berdasarkan alur normal halaman web, tanpa memperhatikan properti top, bottom, left, dan right.

Relative

Dengan properti relative, kamu dapat mengatur posisi gambar relatif terhadap posisi aslinya. Artinya gambar akan diposisikan berdasarkan posisi awalnya sebelum mendapatkan pengaturan CSS.

img {
  position: relative;
  left: 20px;
  top: 20px;
}

Absolute

Properti absolute memungkinkan kamu untuk mengatur posisi gambar secara spesifik di dalam elemen yang posisinya tidak static. Jika tidak ada elemen tersebut, gambar akan diposisikan relatif terhadap halaman web.

img {
  position: absolute;
  top: 50px;
  right: 50px;
}

Fixed

Properti fixed memungkinkan kamu mengatur posisi gambar secara tetap, meski halaman di scroll. Artinya, gambar akan selalu tampil pada posisi yang sama meski halaman web di scroll.

img {
  position: fixed;
  bottom: 0px;
  right: 0px;
}

Ingatlah untuk selalu bereksperimen dengan kode CSS dan lihat apa yang paling sesuai untuk desain web kamu. Pengaturan posisi gambar bisa menjadi sangat kompleks, tetapi dengan praktek dan pengulangan, kamu akan menjadi semakin mahir. Selamat mencoba!