Apakah nilai-nilai CSS position?

Question

Accepted Answer

`position` mengawal bagaimana elemen diletakkan dan sama ada sifat offset (`top`/`right`/`bottom`/`left`) digunakan.

```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 relatif kepada **nenek moyang yang diposisikan terdekat** (apa pun selain `static`). Jadi anda menetapkan `position: relative` pada induk untuk menjadikannya titik rujukan:

```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: lencana, dropdown, tooltip, butang 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** — dikunci ke viewport (selalu kelihatan), cth. navbar berterusan.
- **sticky** — bertindak seperti relative sehingga mencapai ambang (`top: 0`), kemudian kekal di sana semasa bekas dipandang — bagus untuk tajuk bahagian.

## Satu kesilapan biasa

Elemen `absolute`/`fixed` **dikeluarkan dari aliran biasa**, jadi mereka tidak menyimpan ruang — adik-beradik bertindak seolah-olah mereka tidak ada, yang boleh menyebabkan pertindihan. Merancang untuk itu (cth. tambah padding untuk mengimbangi navbar tetap).

## Mengapa ini penting

`position` penting untuk overlay, tajuk melekit, modal, dropdown, dan lencana.

Hubungan relative-parent/absolute-child dan perbezaan fixed-vs-sticky adalah teras praktikal yang anda gunakan secara berterusan.