Layout CSS - proprietà position
- Pagina precedente max-width CSS
- Pagina successiva z-index CSS
position La proprietà definisce il tipo di metodo di posizionamento dell'elemento (statico, relativo, fisso, assoluto o sticky).
proprietà position
position L'attributo definisce il tipo di metodo di posizionamento applicato all'elemento.
Ci sono cinque valori di posizione diversi:
- statico
- relative
- fixed
- assoluto
- sticky
Gli elementi sono in realtà posizionati utilizzando le proprietà top, bottom, left e right. Tuttavia, queste proprietà non hanno effetto a meno che non siano impostate prima la proprietà position. Il loro funzionamento è diverso a seconda del valore di position.
posizione: statico;
La modalità di posizionamento predefinita degli elementi HTML è statica (statico).
Gli elementi con posizionamento statico non sono influenzati dalle proprietà top, bottom, left e right.
Gli elementi con posizione statica non vengono posizionati in modo speciale; si posizionano sempre secondo il flusso normale della pagina:
Questo è il CSS utilizzato:
Esempio
div.static {
posizione: statico;
border: 3px solid #73AD21;
}
posizione: relativa;
posizione: relativa; Gli elementi sono posizionati rispetto alla loro posizione normale.
L'impostazione delle proprietà top, right, bottom e left per un elemento con posizionamento relativo lo farà spostare dalla sua posizione normale per adattarsi. Non verrà apportata alcuna modifica all'altro contenuto per adattarsi allo spazio lasciato vuoto dall'elemento.
Questo è il CSS utilizzato:
Esempio
div.relative {
posizione: relativa;
sinistro: 30px;
border: 3px solid #73AD21;
}
posizione: fissa;
posizione: fissa; Gli elementi posizionati rispetto al punto di vista non lasciano spazi vuoti nel posto in cui dovrebbero essere solitamente posizionati nella pagina. Questo significa che, anche se si scorre la pagina, essi rimangono sempre nella stessa posizione. Le proprietà top, right, bottom e left vengono utilizzate per posizionare questo elemento.
Gli elementi con posizionamento fisso non lasciano spazi vuoti nel posto in cui dovrebbero essere solitamente posizionati nella pagina.
Nota questo elemento fisso nell'angolo in basso a destra della pagina. Questo è il CSS utilizzato:
Esempio
div.fixed {
posizione: fissa;
inferiore: 0;
right: 0;
larghezza: 300px;
border: 3px solid #73AD21;
}
position: absolute;
position: absolute; Gli elementi sono posizionati rispetto all'antenato posizionato più vicino (invece di rispetto al punto di vista, come fixed).
Tuttavia, se un elemento con posizionamento assoluto non ha antenati, userà il corpo del documento (body) e si muoverà insieme alla pagina durante lo scorrimento.
Attenzione:Gli elementi 'posizionati' sono quelli la cui posizione è diversa statico per qualsiasi altro elemento.
Questo è un esempio semplice:
Questo è il CSS utilizzato:
Esempio
div.relative {
posizione: relativa;
larghezza: 400px;
height: 200px;
border: 3px solid #73AD21;
}
div.absolute {
position: absolute;
top: 80px;
right: 0;
width: 200px;
height: 100px;
border: 3px solid #73AD21;
}
position: sticky;
position: sticky; l'elemento si posiziona in base alla posizione di scorrimento dell'utente.
Gli elementi adesivi si posizionano in base alla posizione di scorrimento relativa (relative) e fisso (fixed) tra di loro. All'inizio sarà posizionato in modo relativo, fino a quando non incontrerà la posizione di scorrimento specificata nell'area visibile - poi verrà 'incollato' nella posizione appropriata (ad esempio, position:fixed).
Attenzione:Internet Explorer, Edge 15 e versioni precedenti non supportano il posizionamento adesivo. Safari richiede il prefisso -webkit- (vedi l'esempio seguente). Devi anche specificare almeno top,right,inferiore o left uno dei quali, in modo che la posizionamento adesivo funzioni.
In questo esempio, quando l'elemento sticky raggiunge la sua posizione di scorrimento, rimarrà in alto nella pagina (top: 0)
Esempio
div.sticky {
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0;
background-color: green;
border: 2px solid #4CAF50;
}
Elementi sovrapposti
Quando si posiziona un elemento, può sovrapporsi ad altri elementi.
z-index L'attributo specifica l'ordine di sovrapposizione dell'elemento (quale elemento dovrebbe essere messo davanti o dietro ad altri elementi).
Gli elementi possono avere un ordine di sovrapposizione positivo o negativo:
Questo è un titolo
Poiché l'z-index dell'immagine è -1, si trova dietro il testo.
Esempio
img {
position: absolute;
left: 0px;
top: 0px;
z-index: -1;
}
Gli elementi con un ordine di sovrapposizione più alto si trovano sempre davanti agli elementi con un ordine di sovrapposizione più basso.
Attenzione:Se due elementi posizionati si sovrappongono e non viene specificato z-indexQuindi l'elemento posizionato più in basso nell'HTML verrà visualizzato in alto.
Posizionare il testo nell'immagine
Come posizionare il testo su un'immagine:
Esempio
Prova tu stesso:
In alto a sinistra In alto a destra In basso a sinistra In basso a destra Centrato
Altri esempi
- Impostare la forma dell'elemento
- Questo esempio dimostra come impostare la forma dell'elemento. L'elemento viene ritagliato in questa forma e visualizzato.
Tutte le proprietà di posizionamento CSS
| Proprietà | Descrizione |
|---|---|
| inferiore | Impostare il margine esterno inferiore della casella di posizionamento. |
| clip | Ridurre l'elemento con posizionamento assoluto. |
| left | Impostare l'angolo sinistro esterno del margine di posizionamento. |
| position | Determinare il tipo di posizionamento dell'elemento. |
| right | Impostare l'angolo destro esterno del margine di posizionamento. |
| top | Impostare l'angolo superiore esterno del margine di posizionamento. |
| z-index | Impostare l'ordine di sovrapposizione degli elementi. |
Leggi di più
Libri di approfondimento:Panoramica della posizione CSS
Libri di approfondimento:Posizione relativa CSS
Libri di approfondimento:Posizione assoluta CSS
- Pagina precedente max-width CSS
- Pagina successiva z-index CSS
