La proprietà position specifica il tipo di metodo di posizionamento usato per un elemento (statico, relativo, fisso, assoluto o adesivo).

La proprietà position

Ci sono 5 differenti valori per la proprietà position:

• static
• relative
• fixed
• absolute
• sticky

Gli elementi sono poi posizionati usando le proprietà top, bottom, left e right. Tuttavia, queste propietà non funzioneranno se non si imposta prima la proprietà position per prima. Queste proprietà funzionano diversamente in base al valore di position.

position: static;

Gli elementi HTML hanno static come valore di posizionamento di default.

Gli elementi con valore position static non sono influenzati dalle proprietà top, bottom, left e right.

Un elemento con position: static; non è posizionato in alcun modo speciale, è sempre posizionato secondo il normale flusso della pagina:

Esempio

div.static {
  position: static;
  border: 3px solid #73AD21;
}

VISUALIZZA ESEMPIO

position: relative;

Un elemento con position: relative; è posizionato relativamente alla sua normale posizione.

Impostando le proprietà top, right, bottom e left di un elemento posizionato in maniera relativa si sposterà l'elemento spostandolo alla sua normale posizione. L'altro contenuto non si adatterà allo spazio lasciato dall'elemento:

Esempio

div.relative {
  position: relative;
  left: 30px;
  border: 3px solid #73AD21;
}

VISUALIZZA ESEMPIO

position: fixed;

Un elemento con position: fixed; è posizionato relativamente al viewport, che significa che starà sempre nello stesso posto anche se la pagina è scrollata. Le proprietà top, right, bottom e left sono usate per posizionare l'elemento.

Un elemento fisso non lascia spazio nella pagina, dove normalmente dovrebbe essere posizionato:

Esempio

div.fixed {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 300px;
  border: 3px solid #73AD21;
}

VISUALIZZA ESEMPIO

position: absolute;

Un elemento con position: absolute; è posizionato relativamente all'ascendente più vicino (invece di essere posizionato relativamente al viewport come in fixed).

Tuttavia, se un elemento posizionato in assoluto non ha elementi ascendenti, viene usato il corpo del documento, e si muove con lo scrolling della pagina.

Esempio

div.relative {
  position: relative;
  width: 400px;
  height: 200px;
  border: 3px solid #73AD21;
}

div.absolute {
  position: absolute;
  top: 80px;
  right: 0;
  width: 200px;
  height: 100px;
  border: 3px solid #73AD21;
}

VISUALIZZA ESEMPIO

position: sticky;

Un elemento con position: sticky; è posizionato in base alla posizione dello scroll dell'utente.

Un elemento sticky si alterna tra posizione relative e fixed, in base alla posizione dello scroll. Ha un posizionamento relative fino a un dato valore di offset di posizione nel viewport, poi si "attacca" nel posto (come position: fixed).

In questo esempio, l'elemento sticky si attacca all'apice della pagina (top: 0) quando si raggiunge la sua posizione nello scroll.

Esempio

div.sticky {
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0;
  background-color: green;
  border: 2px solid #4CAF50;
}

VISUALIZZA ESEMPIO

Tutte le proprietà CSS del positioning