Kokie yra CSS position reikšmės?

Question

IT Interview Practice · Accepted Answer

`position` kontroliuoja, kaip elementas yra išdėstytas ir ar taikomos offset savybės (`top`/`right`/`bottom`/`left`).

```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: pagrindinė pora

`absolute` padeda elementą santykiškai jo **artimiausiam pozicionuotam protėviui** (bet kuriame kitame nei `static`). Todėl nustatysite `position: relative` tėviniam elementui, kad jis būtų atskaitos tašku:

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

Šis relative-parent / absolute-child šablonas yra visur: žymos, išsiskleidžiančios sistemos, paskutiniai patarimai, uždarymo mygtukai.

## 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** — pritvirtinta prie viewport (visada matoma), pvz. nuolatinė navbar.
- **sticky** — veikia santykinai, kol nepasiekia slenksčio (`top: 0`), tada lieka ten, kol matomas jos konteineris — puiku skyriaus antraštėms.

## Dažna klaida

`absolute`/`fixed` elementai **pašalinti iš normalaus srauto**, todėl jie nepasiima vietos — seseriniai elementai elgiasi lyg jų nebūtų, kas gali sukelti sutapimą. Planuokite tai (pvz. pridėkite padding, kad kompensuotumėte fiksuotą navbar).

## Kodėl tai svarbu

`position` yra būtinas perdangoms, klijantems antraštėms, modalams, išsiskleidžiančioms sistemoms ir žymoms.

Relative-parent/absolute-child santykis ir fixed-vs-sticky skirtumas yra praktinis pagrindas, kurį jūs naudojate nuolat.

relative + absolute: pagrindinė pora

fixed vs sticky

Dažna klaida

Kodėl tai svarbu

Susiję klausimai