📢 Nuovo Corso Laravel API disponibile!

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;
}