Position & z-index

Alur normal dan properti position

Biasanya elemen tersusun mengikuti alur normal: block ke bawah, inline ke samping. Properti position memungkinkan kita menggeser elemen dari alur itu, lalu top, right, bottom, left menentukan geserannya.

relative

.geser {
  position: relative;
  top: 10px;    /* turun 10px dari posisi semula */
  left: 20px;   /* geser 20px ke kanan */
}

Pemakaian paling umum relative: bukan untuk menggeser, tetapi untuk menjadikan elemen sebagai acuan bagi anak yang ber-absolute.

absolute: pola induk-anak

.kartu {
  position: relative;      /* acuan */
  width: 300px;
}
.kartu .label {
  position: absolute;      /* relatif terhadap .kartu */
  top: 8px;
  right: 8px;
}

Elemen absolute mencari induk terdekat yang punya position selain static. Jika tidak ada, ia memakai halaman. Itulah alasan induknya diberi relative. Elemen absolute tidak lagi memakan ruang, jadi elemen di sekitarnya mengisi tempatnya.

fixed: menempel di layar

.tombol-wa {
  position: fixed;
  bottom: 20px;
  right: 20px;
}

Cocok untuk tombol "chat" atau "kembali ke atas" yang selalu terlihat.

sticky: header lengket

.menu {
  position: sticky;
  top: 0;        /* menempel di atas saat di-scroll */
}

z-index: tumpukan

Elemen yang position-nya bukan static bisa ditumpuk. z-index yang lebih besar berada di atas. Angka negatif ada di bawah. Elemen dengan z-index hanya berpengaruh jika punya position (atau berada dalam flex/grid).