Position CSS

Properti position di CSS menspesifikasikan jenis metode posisi yang digunakan untuk elemen (static, relative, fixed, absolute atau sticky).

Properti Position

Properti position menetapkan jenis metode penentuan posisi yang digunakan untuk elemen.

Ada lima nilai posisi yang berbeda:

• static
• relative
• fixed
• absolute
• sticky

Elemen kemudian diposisikan menggunakan properti top, bottom, left, dan right. Namun, properti ini tidak akan berfungsi kecuali jika properti position diset terlebih dahulu. Mereka juga bekerja secara berbeda tergantung pada nilai posisi.

position: static;

Elemen HTML diposisikan statis secara default.

Elemen position static tidak terpengaruh oleh properti top, bottom, left, dan right.

Elemen dengan position: static; tidak diposisikan dengan cara khusus apa pun dan selalu diposisikan sesuai dengan normal flow dari halaman:

Elemen <div> ini memiliki position: static;

Berikut CSS yang digunakan:

div.static {
  position: static;
  border: 3px solid #303F9F;
}

position: relative;

Sebuah elemen dengan position: relative; diposisikan relatif terhadap posisi normalnya.

Menset properti top, right, bottom, dan left dari elemen yang posisinya relatif akan menyebabkannya diset menjauh dari posisi normalnya. Konten lain tidak akan disesuaikan agar sesuai dengan celah yang ditinggalkan oleh elemen.

Elemen <div> ini memiliki position: relative;

Berikut CSS yang digunakan:

div.relative {
  position: relative;
  left: 30px;
  border: 3px solid #303F9F;
}

position: fixed;

Elemen dengan position: fixed; diposisikan relatif terhadap viewport, yang berarti selalu berada di tempat yang sama meskipun halaman di-scroll. Properti top, kanan, bawah, dan kiri digunakan untuk memposisikan elemen.

Elemen fixed tidak meninggalkan celah di halaman tempat elemen tersebut biasanya berada.

Perhatikan elemen fixed di sudut kanan bawah halaman.

Elemen <div> ini memiliki position: fixed;

Berikut CSS yang digunakan:

div.fixed {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 300px;
  border: 3px solid #303F9F;
}

position: absolute;

Elemen dengan position: absolute; diposisikan relatif terhadap leluhur yang diposisikan terdekat (bukan diposisikan relatif terhadap viewport, seperti fixed).

Namun, jika elemen yang diposisikan absolute tidak memiliki leluhur yang diposisikan, elemen tersebut menggunakan body dokumen, dan bergerak bersama dengan scroll halaman.

Catatan: Elemen "diposisikan" adalah elemen yang posisinya apa pun kecuali static.

Berikut adalah contoh sederhana:

Elemen <div> ini memiliki position: relative;

Elemen <div> ini memiliki position: absolute;

Berikut CSS yang digunakan:

div.relative {
  position: relative;
  width: 400px;
  height: 200px;
  border: 3px solid #303F9F;
}
div.absolute {
  position: absolute;
  top: 80px;
  right: 0;
  width: 200px;
  height: 100px;
  border: 3px solid #303F9F;
}

position: sticky;

Elemen dengan position: sticky; diposisikan berdasarkan posisi gulir pengguna.

Elemen sticky beralih antara relative dan fixed, tergantung pada posisi gulir. Diposisikan relatif sampai posisi offset yang diberikan terpenuhi di viewport - lalu "menempel" di tempatnya (seperti position:fixed).

Dalam contoh ini, elemen sticky menempel di bagian atas halaman ( top: 0), saat Anda mencapai posisi gulirnya.

Contoh

div.sticky {
  position: -webkit-sticky; /* Safari *
  position: sticky;
  top: 0;
  background-color: green;
  border: 2px solid #4CAF50;
}

Elemen Overlapping (Tumpang Tindih)

Ketika elemen diposisikan, mereka dapat tumpang tindih dengan elemen lain.

Properti z-index dapat digunakan untuk menentukan urutan tumpukan elemen (yang elemen harus ditempatkan di depan, atau belakang, yang lain).

Sebuah elemen dapat memiliki urutan tumpukan positif atau negatif:

Contoh

img {
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: -1;
}

Elemen dengan urutan tumpukan yang lebih besar selalu di depan elemen dengan urutan tumpukan yang lebih rendah.

Catatan: Jika dua elemen yang diposisikan tumpang tindih tanpa menentukan z-index, elemen yang diposisikan terakhir dalam kode HTML akan ditampilkan di atas.

Memposisikan Teks Dalam Gambar

Cara memposisikan teks di atas gambar:

Sumber referensi: w3schools