DISKON TERBATAS! Masukkan kupon "skillbaru" saat checkout di kelas apa saja

Logo Koala Skodev mengetik

Skodev

Belajar coding dalam bahasa Indonesia

POSITION RELATIVE

Mempelajari fungsi position relative dalam CSS serta cara menggunakannya.

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.

👈🏼 Position static
Position absolute 👉🏼