Imparare l'impaginazione con i CSS
Per poter fare impaginazioni più complesse, dobbiamo discutere della proprietà position. Ha un mucchio di possibili valori, e i loro nomi non hanno senso e sono impossibili da ricordare. Vediamoli uno per uno, ma forse è meglio se aggiungi anche questa pagina ai preferiti.
.static {
position: static;
}
static è il valore predefinito. Un elemento con position: static; non è posizionato in nessun modo particolare. Un elemento statico è detto non posizionato e un elemento con position impostata a qualunque altro valore è detto posizionato
.relative1 {
position: relative;
}
.relative2 {
position: relative;
top: -20px;
left: 20px;
background-color: white;
width: 500px;
}
relative si comporta allo stesso modo di static a meno che si aggiungano alcune proprietà extra.
Impostare le proprietà top, right, bottom, e left di un elemento posizionato relativamente farà sì che esso risulti spostato dalla sua normale posizione. Gli altri contenuti non si infileranno negli spazi lasciati liberi dall'elemento in questione.
Ciao! Non prestarmi attenzione ancora.
</div>
Un elemento fisso è posizionato relativamente all'area visualizzata della finestra, il che significa che rimarrà sempre nello stesso posto anche quando la pagina viene scorsa. Così come per relative, vengono utilizzate le proprietà top, right, bottom, e left.
Son sicuro che avrai notato l'elemento fisso nell'angolo in basso a destra della pagina. Ora hai il mio permesso di prestargli attenzione. Qui il codice CSS che lo posiziona laggiù:
.fixed {
position: fixed;
bottom: 0;
right: 0;
width: 200px;
background-color: white;
}Un elemento fisso non lascia del vuoto nel punto della pagina in cui normalmente sarebbe dovuto essere.
I browser dei dispositivi mobile hanno un supporto soprendentemente traballante per fixed. Scopri di più sulla situazione qua.
absolute è il valore di position più complicato. absolute si comporta come fixed tranne per il fatto che si riferisce al più vicino elemento di livello superiore posizionato invece che alla porzione di finestra visibile. Se un elemento posizionato in maniera assoluta non ha un elemento di livello superiore posizionato, utilizza il body del documento, e comunque si muoverà insieme allo scorrimento della pagina. Ricorda, gli elementi "posizionati" sono quelli che hanno un qualsiasi valore di position tranne static.
Qui un piccolo esempio:
.relative {
position: relative;
width: 600px;
height: 400px;
}
.absolute {
position: absolute;
top: 120px;
right: 0;
width: 300px;
height: 200px;
}
Questo elemento è posizionato relativamente. Se questo elemento avesse position: static; il suo figlio posizionato in maniera assoluta sarebbe scappato via e sarebbe stato posizionato relativamente al body del documento.
Questo elemento è posizionato in maniera assoluta. È posizionato relativamente all'elemento che lo contiene.
</div>
Questa roba è complicata, ma è essenziale per creare impaginazioni CSS grandiose. Nella prossima pagina useremo position in un esempio più pratico.
