Layout CSS - La proprietà position
La positionproprietà specifica il tipo di metodo di posizionamento utilizzato per un elemento (statico, relativo, fisso, assoluto o permanente).
La posizione Proprietà
La positionproprietà specifica il tipo di metodo di posizionamento utilizzato per un elemento.
Esistono cinque diversi valori di posizione:
staticrelativefixedabsolutesticky
Gli elementi vengono quindi posizionati utilizzando le proprietà superiore, inferiore, sinistra e destra. Tuttavia, queste proprietà non funzioneranno se position
prima non viene impostata la proprietà. Inoltre funzionano in modo diverso a seconda del valore della posizione.
posizione: statica;
Gli elementi HTML sono posizionati statici per impostazione predefinita.
Gli elementi posizionati statici non sono interessati dalle proprietà superiore, inferiore, sinistra e destra.
Un elemento con position: static;non è posizionato in modo particolare; è sempre posizionato secondo il normale flusso della pagina:
Ecco il CSS che viene utilizzato:
Esempio
div.static {
position: static;
border: 3px solid #73AD21;
}
posizione: relativa;
Un elemento con position: relative;è posizionato rispetto alla sua posizione normale.
L'impostazione delle proprietà in alto, a destra, in basso e a sinistra di un elemento posizionato relativamente farà sì che venga spostato lontano dalla sua posizione normale. Gli altri contenuti non verranno adattati per adattarsi a eventuali spazi vuoti lasciati dall'elemento.
Ecco il CSS che viene utilizzato:
Esempio
div.relative {
position: relative;
left: 30px;
border: 3px solid #73AD21;
}
posizione: fissa;
Un elemento con position: fixed;è posizionato rispetto al viewport, il che significa che rimane sempre nella stessa posizione anche se la pagina viene fatta scorrere. Le proprietà superiore, destra, inferiore e sinistra vengono utilizzate per posizionare l'elemento.
Un elemento fisso non lascia uno spazio vuoto nella pagina in cui sarebbe stato normalmente posizionato.
Notare l'elemento fisso nell'angolo inferiore destro della pagina. Ecco il CSS che viene utilizzato:
Esempio
div.fixed {
position: fixed;
bottom: 0;
right: 0;
width:
300px;
border: 3px solid #73AD21;
}
position: fixed;posizione: assoluta;
Un elemento con position: absolute;è posizionato rispetto all'antenato posizionato più vicino (anziché posizionato rispetto alla finestra, come fisso).
Tuttavia; se un elemento posizionato assoluto non ha antenati posizionati, utilizza il corpo del documento e si sposta insieme allo scorrimento della pagina.
Nota: gli elementi posizionati assoluti vengono rimossi dal flusso normale e possono sovrapporsi agli elementi.
Qui c'è un semplice esempio:
Ecco il CSS che viene utilizzato:
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;
}
posizione: appiccicosa;
Un elemento con position: sticky;viene posizionato in base alla posizione di scorrimento dell'utente.
Un elemento permanente alterna tra relativee fixed, a seconda della posizione di scorrimento. Viene posizionato in modo relativo fino a quando una determinata posizione di offset non viene raggiunta nella finestra, quindi "si attacca" in posizione (come position:fixed).
Nota: Internet Explorer non supporta il posizionamento permanente. Safari richiede un prefisso -webkit- (vedi esempio sotto). È inoltre necessario specificare almeno uno di top, right, bottomo leftaffinché il posizionamento adesivo funzioni.
In questo esempio, l'elemento permanente rimane in cima alla pagina ( top: 0), quando si raggiunge la posizione di scorrimento.
Esempio
div.sticky {
position: -webkit-sticky; /* Safari */
position:
sticky;
top: 0;
background-color: green;
border: 2px solid #4CAF50;
}
Posizionamento del testo in un'immagine
Come posizionare il testo su un'immagine:
Esempio
Provate voi stessi:
Altri esempi
This example demonstrates how to set the shape of an element. The element is clipped into this shape, and displayed.
All CSS Positioning Properties
| Property | Description |
|---|---|
| bottom | Sets the bottom margin edge for a positioned box |
| clip | Clips an absolutely positioned element |
| left | Sets the left margin edge for a positioned box |
| position | Specifies the type of positioning for an element |
| right | Sets the right margin edge for a positioned box |
| top | Sets the top margin edge for a positioned box |