Apa saja nilai position CSS?

Question

IT Interview Practice · Accepted Answer

`position` mengontrol bagaimana elemen ditempatkan dan apakah properti offset (`top`/`right`/`bottom`/`left`) berlaku.

```css
.a { position: static; }   /* default — normal flow, offsets IGNORED */
.b { position: relative; } /* normal flow, but offsets shift it from itself */
.c { position: absolute; } /* removed from flow, positioned vs nearest positioned ancestor */
.d { position: fixed; }    /* removed from flow, positioned vs the VIEWPORT */
.e { position: sticky; }   /* hybrid: normal until a scroll threshold, then sticks */
```

## relative + absolute: pasangan kunci

`absolute` memposisikan elemen relative ke **ancestor yang diposisikan terdekat** (apa pun selain `static`). Jadi Anda menetapkan `position: relative` pada induk untuk menjadikannya titik referensi:

```css
.card {
  position: relative;   /* becomes the positioning context */
}
.badge {
  position: absolute;   /* positioned relative to .card */
  top: 8px;
  right: 8px;           /* pins the badge to the card's top-right corner */
}
```

Pola relative-parent / absolute-child ini ada di mana-mana: badge, dropdown, tooltip, tombol tutup.

## fixed vs sticky

```css
.navbar { position: fixed; top: 0; }   /* stays put on screen while scrolling */
.section-header { position: sticky; top: 0; } /* scrolls with content, then sticks at top */
```

- **fixed** — terkunci ke viewport (selalu terlihat), misalnya navbar persisten.
- **sticky** — berperilaku relative hingga mencapai ambang (`top: 0`), kemudian tetap di sana selama wadahnya terlihat — sempurna untuk header bagian.

## Kesalahan umum

Elemen `absolute`/`fixed` **dihapus dari aliran normal**, jadi mereka tidak mereservasi ruang — saudara kandung bertindak seolah-olah mereka tidak ada, yang dapat menyebabkan tumpang tindih. Rencanakan itu (misalnya tambahkan padding untuk mengkompensasi navbar fixed).

## Mengapa ini penting

`position` sangat penting untuk overlay, sticky header, modal, dropdown, dan badge.

Hubungan relative-parent/absolute-child dan perbedaan fixed-vs-sticky adalah inti praktis yang Anda gunakan terus-menerus.

relative + absolute: pasangan kunci

fixed vs sticky

Kesalahan umum

Mengapa ini penting

Pertanyaan terkait