Position in CSS

La proprietà position specifica il tipo di metodo di posizionamento utilizzato per un elemento.

Ci sono cinque valori diversi per la proprietà di posizionamento:

statico
relativo
fisso
assoluto
sticky Gli elementi vengono poi posizionati utilizzando le proprietà top, bottom, left e right. Tuttavia, queste proprietà non funzioneranno a meno che la proprietà di posizionamento non sia impostata prima. Inoltre, funzionano in modo diverso a seconda del valore di posizionamento.

Posizione Statica

Gli elementi HTML sono posizionati statici in modo predefinito.

Gli elementi statici non sono influenzati dalle proprietà top, bottom, left e right.

Un elemento con position: static; non è posizionato in modo speciale; è sempre posizionato in base al flusso normale della pagina.

h1 {
  position: static;
  border: 5px solid yellow;
}

Posizione Relativa

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

L’impostazione delle proprietà top, right, bottom e left di un elemento posizionato in modo relativo farà sì che sia spostato dalla sua posizione normale. Altri contenuti non verranno adattati per riempire eventuali spazi lasciati dall’elemento.

h1.relative {
  position: relative;
  left: 20px;
  border: 5px solid yellow;
}

Posizione Fissa

Un elemento con position: fixed; è posizionato rispetto alla finestra di visualizzazione, il che significa che rimane sempre nello stesso luogo anche se la pagina viene scrollata. Le proprietà top, right, bottom e left vengono utilizzate per posizionare l’elemento.

Un elemento fisso non lascia uno spazio nella pagina dove sarebbe stato normalmente posizionato.

h1 {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 300px;
  border: 5px solid yellow;
}

Posizione Assoluta

Un elemento con position: absolute; è posizionato rispetto al parente posizionato più vicino. Tuttavia, se un elemento posizionato in modo assoluto non ha genitori posizionati, utilizza l’elemento <body> come riferimento.

Gli elementi posizionati in modo assoluto vengono rimossi dal flusso normale e possono sovrapporsi agli elementi.

h1 {
  position: relative;
  width: 400px;
  height: 400px;
  border: 5px solid yellow;
}

h2 {
  position: absolute;
  top: 80px;
  right: 0;
  width: 400px;
  height: 400px;
  border: 5px solid red;
}

Posizione Sticky

Un elemento con position: sticky; è posizionato in base alla posizione di scorrimento dell’utente.

Un elemento sticky alterna tra il posizionamento relativo e fisso, a seconda della posizione di scorrimento. Viene posizionato in modo relativo fino a quando si raggiunge una posizione offset data nella finestra di visualizzazione, quindi rimane “appiccicato” in quel punto (come position:fixed).

div.sticky {
  position: sticky;
  top: 0;
  background-color: black;
  border: 5px solid red;
}