X'inhuma l-valuri tal-CSS position?

Question

Accepted Answer

`position` jikkontolla kif eleman jitqiegħed u jekk il-proprjetajiet offset (`top`/`right`/`bottom`/`left`) japplikaw.

```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: il-qies ewlieni

`absolute` ipoġġi element relattiv għall-**antenato posizzjonat l-aktar viċin** (kwalunkwe ħadd ieħor minn `static`). Għalhekk issettja `position: relative` fuq ġenitur biex taħduh il-punt ta' referenza:

```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 */
}
```

Dak il-mudell relative-parent / absolute-child hu kullimkien: ġilland, dropdown, tooltip, buttuni tal-għeluq.

## 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** — magħluq fuq il-viewport (dejjem viżibbli), eż. navbar persistenti.
- **sticky** — taġixxi bħal relative sa sa tintlaħaq is-sogħla (`top: 0`), imbagħad tibqa' hemm filwaqt li l-kontenitru tagħha jkun fil-view — tajjeb għall-intestaturi tal-frieq.

## Żball komuni

Elementi `absolute`/`fixed` huma **mneħħija mill-fluss normali**, għalhekk ma jisservaw spazju — it-tifla jottaġu bħallikieku ma jeżistux, li jista' jikkawża sovrapposizzjoni. Ipprospetta għall (eż. żid padding biex jikkompensaw navbar fiss).

## Għaliex dan importanti

`position` hija essenzjali għal overlay, intestaturi sticky, modali, dropdown, u ġilland.

Ir-relazzjoni relative-parent/absolute-child u d-distinzjoni fixed-vs-sticky huma l-qalba prattika li tuża kostantement.