POSITION RELATIVE

Pada halaman ini, kita akan fokus pada sebuah properti CSS yang bernama position: relative;. Properti ini biasanya digunakan untuk mengatur posisi elemen HTML pada laman web.

Pengertian Position Relative

position: relative; dalam CSS adalah sebuah metode untuk mengatur ulang posisi suatu elemen dari posisi normalnya. Dalam kata lain, position: relative; memindahkan elemen dari posisi seharusnya (tergantung pada nilai top, right, bottom, dan left), namun masih menjaga posisi asli elemen dalam alur layout dokumen.

div {
  position: relative;
  top: 20px;
  left: 50px;
}

Pada contoh di atas, div akan dipindahkan 20 piksel ke bawah dan 50 piksel ke kanan dari posisi aslinya.

Penggunaan Position Relative

Sebagai Kontainer

Elemen dengan position: relative; seringkali digunakan sebagai kontainer bagi elemen lain dengan position: absolute;. Dalam hal ini, position: relative; akan menetapkan konteks posisi bagi elemen anak dengan position: absolute;.

div.relative {
  position: relative;
  width: 400px;
  height: 200px;
}

div.absolute {
  position: absolute;
  top: 80px;
  right: 0;
}

Dalam contoh di atas, div dengan kelas .absolute akan diatur posisinya relatif terhadap div dengan kelas .relative, bukan terhadap seluruh halaman.

Desain yang Responsif

position: relative; juga dapat membantu dalam pembuatan desain responsif. Ini memungkinkan elemen untuk dipindahkan dan diatur ulang dengan mudah, sesuai dengan ukuran layar atau perangkat pengguna.

@media (max-width: 600px) {
  div {
    position: relative;
    left: 20px;
  }
}

Pada contoh di atas, div akan dipindahkan 20 piksel ke kanan ketika lebar layar pengguna kurang dari atau sama dengan 600 piksel.