Come posizionare oggetti in CSS: la proprietà position specifica il tipo di metodo di posizionamento utilizzato per un elemento (statico, relativo, fisso o assoluto).
La proprietà Positon
La proprietà position specifica il tipo di metodo di posizionamento utilizzato per un elemento.
Esistono quattro valori di posizione diversi:
staticrelativefixedabsolute
Gli elementi vengono quindi posizionati utilizzando le proprietà top, bottom, left, e right.
Tuttavia, queste proprietà non funzionano a meno che la proprietà position non sia impostata prima.
Essi funzionano anche in modo diverso a seconda del valore di position.
position: static;
Per impostazione predefinita, gli elementi HTML vengono posizionati come static.
Gli elementi posizionati con static non sono influenzati dalle proprietà top, bottom, left, e right.
Un elemento di position: static; non è posizionato in alcun modo speciale; è sempre posizionato in base al flusso normale della pagina:
Esempio
Questo elemento <div> usa position: static;
Ecco il CSS utilizzato:
div.static {
position: static;
border: 3px solid #73AD21;
}position: relative;
Un elemento con position: relative; è posizionato rispetto alla sua posizione normale.
L’impostazione delle proprietà top, bottom, left, e right di un elemento posizionato con relative determinerà la regolazione lontano dalla posizione normale. Altri contenuti non verranno regolati per adattarsi a qualsiasi ostacolo lasciato dall’elemento.
Esempio
Questo elemento <div> ha la posizione relative;
Ecco il CSS utilizzato:
div.relative {
position: relative;
left: 30px;
border: 3px solid #73AD21;
}position: fixed;
Un elemento con position: fixed; è posizionato rispetto alla visualizzazione, il che significa che rimane sempre nello stesso posto anche se si scorre la pagina. Le proprietà top, right, bottom e left vengono utilizzate per posizionare l’elemento.
Un elemento fisso non lascia uno spazio nella pagina in cui sarebbe stato normalmente collocato.
Esempio
Ecco il CSS utilizzato:
div.fixed {
position: fixed;
bottom: 0;
right: 0;
width: 300px;
border: 3px solid #73AD21;
}position: absolute;
Un elemento con position: absolute; è posizionato rispetto all’elemento precedente più vicino (anziché posizionato rispetto alla vista, come fisso).
Però; Se un elemento posizionato absolute non dispone di elementi precedenti posizionati, utilizza il corpo del documento e si muove con lo scorrimento della pagina.
Nota: un elemento “posizionato” è quello la cui posizione è qualsiasi cosa tranne che “static”.
Esempio
Qui c’è un semplice 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;
}