Cilat janë vlerat e CSS position?

Question

Accepted Answer

`position` kontrollon se si përshkruhet një element dhe nëse vetitë e zhvendosjes (`top`/`right`/`bottom`/`left`) zbatohen.

```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: çiftimi kyç

`absolute` pozicionon një element në lidhje me **paraardhësin e tij më të afërt që është i pozicionuar** (çdo gjë përveç `static`). Pra, ju vendosni `position: relative` në prindin për ta bërë atë pikën e referencës:

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

Ky model relative-prind / absolute-fëmijë është kudo: shenja, rënie-menuja, tooltip-et, butona mbylljeje.

## 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** — i bllokuar në viewport (gjithmonë i dukshëm), p.sh. një barre navigimi e përhershme.
- **sticky** — vepron relativisht derisa të arrijë pragun (`top: 0`), pastaj qëndron atje ndërsa kontejneri i tij është në pamje — i madh për titujt e seksionit.

## Një kurth i zakonshëm

`absolute`/`fixed` elementet janë **hequr nga rrjedha normale**, kështu që nuk ruajnë hapësirë — vëllezërit e motrat veprojnë sikur nuk janë atje, e cila mund të shkaktojë mbivendosje. Planifikojeni atë (p.sh. shtoni mbushje për të kompensuar një barre navigimi fikse).

## Pse ka rëndësi

`position` është thelbësor për veshje, koka ngjitëse, modale, rënie-meuja, dhe shenja.

Razmerja relative-prind/absolute-fëmijë dhe dallimi fixed-vs-sticky janë bërthama praktike që përdorni vazhdimisht.