Quali sono i valori della proprietà CSS position?

Question

IT Interview Practice · Accepted Answer

`position` controlla il modo in cui un elemento viene posizionato e se le proprietà di offset (`top`/`right`/`bottom`/`left`) si applicano.

```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: l'accoppiamento fondamentale

`absolute` posiziona un elemento rispetto al suo **antenato posizionato più vicino** (qualsiasi cosa diversa da `static`). Quindi imposti `position: relative` su un elemento padre per renderlo il punto di riferimento:

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

Il pattern relative-parent / absolute-child è onnipresente: badge, menu a discesa, tooltip, pulsanti di chiusura.

## 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** — bloccato al viewport (sempre visibile), ad es. una navbar persistente.
- **sticky** — agisce come relative finché non raggiunge la soglia (`top: 0`), poi rimane lì mentre il suo contenitore è in vista — ottimo per intestazioni di sezione.

## Un errore comune

Gli elementi `absolute`/`fixed` sono **rimossi dal flusso normale**, quindi non riservano spazio — i fratelli agiscono come se non fossero lì, il che può causare sovrapposizioni. Pianifica questo aspetto (ad es. aggiungi padding per compensare una navbar fissa).

## Perché è importante

`position` è essenziale per overlay, intestazioni appiccicose, modal, menu a discesa e badge.

La relazione relative-parent/absolute-child e la distinzione fixed-vs-sticky sono il nucleo pratico che usi costantemente.

relative + absolute: l'accoppiamento fondamentale

fixed vs sticky

Un errore comune

Perché è importante

Domande correlate