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