Posizionamento e visualizzazione degli elementi
I CSS permettono di "giocare" con gli elementi HTML di una pagina in modo da visualizzarli o non visualizzarli, ed in modo da posizionarli dove si preferisce, a prescindere dalla naturale posizione sequenziale che un elemento avrebbe.
Le proprietà CSS coinvolte in questo "gioco" sono le seguenti:
- position - stabilisce la posizione assoluta (absolute) o relativa (relative, di default se non specificato) di un elemento;
- top - specifica la distanza tra il bordo superiore della pagina e l'elemento;
- left - specifica la distanza tra il bordo sinistro della pagina e l'elemento;
- z-index - permette la sovrapposizione di elementi;
- display - visualizza o meno un elemento;
- visibility - visualizza o meno un elemento.
Vediamo subito un esempio di posizionamento assoluto di un elemento in una pagina Web:
#ElementoConPosizionamentoAssoluto
{
position: absolute;
top: 150px;
left: 250px;
}
L'elemento in questione:
<div id="ElementoConPosizionamentoAssoluto">...</div>verrà posizionato a 150 pixel dal bordo superiore della pagina ed a 250 pixel da quello sinistro, a prescindere dalla presenza di altri elementi non posizionati in maniera assoluta.
Vediamo adesso come sovrapporre due elementi:
#A, #B
{
position: absolute;
}
#A
{
top: 10px;
left: 10px;
z-index: 1;
}
#B
{
top: 15px;
left: 15px;
z-index: -1;
}
L'elemento B sarà sovrapposto dall'elemento A.
Per visualizzare correttamente l'esempio consiglio di assegnare altezza e larghezza (height e width) ai due elementi e di assegnare a ciascuno un diverso colore di sfondo.
Nota. La sintassi:
#A, #Bpermette di assegnare lo stesso stile, in un colpo solo, a due elementi, classi o ID che siano, separandoli con una virgola.
Vediamo adesso come utilizzare display e visibility per la visualizzazione di un elemento.
#NASCOSTO
{
display: none;
}
oppure:
#NASCOSTO
{
visibility: hidden;
}
La differenza tra i due è che display non occupa spazio sulla pagina quando nasconde un elemento, mentre visibility si, quindi è opportuno impostare visibility come segue:
#NASCOSTO
{
position: absolute;
visibility: hidden;
}
Inoltre display è poco supportato da parte di alcuni browser presenti sul mercato.
Per visualizzare un elemento useremo i seguenti valori:
#VISIBILE
{
display: block;
}
oppure:
#VISIBILE
{
visibility: visible;
}
Questi "giochi" non sono abbastanza "divertenti" solo con i CSS, quindi sarà opportuno utilizzarli attraverso Javascript.
