Nel web design, di norma esistono due metodi principali per posizionare gli elementi in una pagina: sfruttare la proprietà "position" o proprietà "float". Si può scegliere un metodo in alternativa all'altro oppure di utilizzarli entrambi combinati insieme.
Position in HTML e CSS
La proprietà position è forse la più immediata da comprendere, poiché utilizza il metodo delle "coordinate" alle quali sarà posizionato l'elemento che prendiamo in considerazione. Il secondo è un metodo più relativo, ma se vogliamo, anche più veloce.
In ogni caso prima di cominciare a posizionare gli oggetti, quale che sia il metodo scelto, dobbiamo sempre ricordarci di definire il box model di ogni elemento, per partire da subito con le misure più corrette.
Il posizionamento assoluto (position: absolute)
È il metodo più semplice da comprendere, poiché come dice la parola stessa, permette di posizionare l'elemento in modo assoluto.
Va da sé che se associassimo questa proprietà ad un div unico presente all'interno di una pagina vuota, esso si comporterebbe tenendo come riferimento i contorni del browser per le coordinate che gli assegneremmo.
Abbiamo già visto però come, a seconda della risoluzione dello schermo o delle dimensioni della finestra, i contorni dei browser possano variare ed anche di molto. Se non vogliamo che il posizionamento subisca l'effetto di queste variazioni possiamo usare un altro tipo di posizionamento, il position: relative, per contrassegnare il div che contiene il sito, al quale gli elementi faranno riferimento per le coordinate.
Vediamo nella pratica ciò come avviene.
Poniamo di avere un elemento "contenitore" che abbia al suo interno gli elementi "uno" e "due" e che gli stessi siano posizionati in modo affiancato nel seguente modo:
Usando il metodo del posizionamento assoluto dobbiamo innanzitutto dare una dimensione al "contenitore" e assegnargli la proprietà position: relative. Questa proprietà non determina alcun comportamento anomalo nel div se non vengono definite le coordinate e se non posizionato a sua volta all'interno di un altro div, pertanto possiamo tranquillamente scrivere:
#contenitore
{
margin: 0 auto; /* ipotizzando che sia centrato all'interno della pagina */
padding: 0;
position: relative;
width: 500px;
}Gli altri due elementi, rispettivamente di 150px di larghezza e di 350px, useranno il position: absolute e le coordinate per posizionarsi all'interno dell'elemento contenitore.
#uno {
width: 150px;
position: absolute;
top: 0;
left: 0;
}Il primo si posizionerà in alto a sinistra senza problemi
#due {
width: 350px;
position: absolute;
top: 0;
left: 150px; /* che è la larghezza del primo elemento */
}Il position absolute infatti, permette di slegare gli elementi dall'ordine in cui vengono elencati nell'HTML, di conseguenza possiamo creare tutti i giochi possibili di sovrapposizione eventuali all'interno del div contenitore, sfruttando le coordinate dei singoli elementi.
In questo caso per comodità e coerenza abbiamo definito sempre le coordinate top e left ma possiamo giocare anche con right ed eventualmente con il bottom, se il divisore che li contiene ha un'altezza fissa.
Al secondo elemento avremmo infatti potuto dire solamente:
top: 0;
right: 0;Ed avremmo ottenuto lo stesso risultato.
Z-index: il web è anche in 3D!
Grazie al posizionamento assoluto è possibile giocare graficamente con le sovrapposizioni e le trasparenze, avendo cura di dare ai singoli elementi anche un'informazione aggiuntiva, quale lo z-index.
È questa una proprietà, che come è facile intuire, aggiunge "profondità" alle coordinate cartesiane già usate per posizionare l'oggetto, più precisamente serve a definire l'ordine di visualizzazione tra i livelli.
Il valore che può assumere è una cifra senza alcuna unità di misura, che determina la profondità di livello usata per l'elemento corrente, ma bisogna ricordarsi di segnalarla anche per il div contenitore o che vogliamo stia "sotto" al div che ci interessa far risaltare. Può assumere anche valori negativi, tenendo presente che i valori più alti sono quelli che si sovrappongono a quelli più bassi.
Paragonandoli alle pagine di un libro, il livello con il valore più alto è come la pagina di un libro che ha il numero più basso e quindi più "vicina" a noi.
CSS Float : posizionamento flottante
Con il float il discorso è diverso poiché non si hanno come riferimenti le coordinate ma gli elementi a cui è associata la seguente proprietà assumono un comportamento relazionandosi con il divisore che li contiene in modo automatico, senza aggiungere ulteriori righe di codice ad esso e seguendo il flusso di scrittura/lettura del codice HTML.
Nello stesso esempio precedente, per posizionare i due div avremmo semplicemente scritto:
#contenitore
{
/* ipotizzando che sia centrato all'interno della pagina */
margin: 0 auto;
padding: 0;
width: 500px;
}e:
#uno
{
width: 150px;
float:left;
}
#due
{
width: 350px;
float: left;
}La proprietà float può assumere il valore "left", "right", "none" e possiamo "giocarci" permettendo, all'occorrenza, anche di invertire la posizione dei due elementi senza toccare la pagina HTML, ma semplicemente usando il float:right al posto del float:left.
In questo modo infatti il primo div che si trova nell'HTML si posizionerà a destra, e il secondo, anch'esso con il float a destra, vi si affiancherà dove vi sia spazio disponibile.
Controindicazioni del position e del float facilmente superabili
È bene con il float fare sempre attenzione al box model per non incorrere nel facile errore che il secondo div si posizioni sotto al primo, invece che dove gli è stato indicato, semplicemente perchè non ha spazio sufficiente in orizzontale. Fate attenzione, a tal proposito, ad indicare sempre margin e padding anche quando questi abbiano valore zero.
Ciò non avviene nel position: absolute, creando però, dove il box model non sia rispettato, degli sgradevoli giochi di sovrapposizioni degli elementi non voluti.
