Il posizionamento degli elementi è uno dei campi di applicazione del CSS, i fogli di stile. Con CSS gli elementi si lasciano posizionare a piacere.
CSS code float left and right
clear
"clear" indica se vicino ad un elemento si possano trovare altri elementi o meno. Possono essere dichiarati i valori: "all", "none", "left", "right" e "both".
display
"display" indica come deve essere visualizzato un elemento. Descrive il tipo di elemento con il quale deve essere visualizzato. Possono essere dichiarati i valori: "block", "inline", "list-item" e "none". Con CSS2 Level 2 si sono aggiunti diversi altri valori.
float
"float" indica se un elemento deve essere scorrevole e dove può o deve esserlo. Possono essere dichiarati i valori: "left" (l’elemento deve scorrere verso sinistra), "right" (l’elemento deve scorrere verso destra) e "none". Lo scorrere si intende che per questo elemento è possibile raggiungere l’elemento successivo nella pagina e passarci sopra o addirittura ridurlo di dimensioni.
height
"height" indica l’altezza di un elemento. Possono essere dichiarati i valori: "auto" (l’altezza deve essere calcolata automaticamente a seconda del contenuto) o un valore numerico esatto (che indica l’altezza fissa).
width
"width" indica la larghezza di un elemento. Possono essere dichiarati i valori: "auto" (la larghezza deve essere calcolata automaticamente a seconda del contenuto) o un valore numerico esatto (che indica la larghezza fissa).
clip
"clip" descrive il piazzamento di una parte di un elemento, la cui proprietà "overview" abbia un altro valore di "visible". In questo caso un elemento contiene un altro elemento il quale potrebbe essere posizionato in modo che si trovi fuori dall’elemento principale. "clip" descrive quindi come il contenuto di questo elemento posizionato debba essere piazzato. Descrive quanto contenuto dell’elemento posizionato sia visibile.
min-height e max-height
"min-height" e "max-height" indicano l’altezza minima e rispettivamente massima di un elemento. Possono essere dichiarati sia valori numerici che percentuali.
min-width e max-width
"min-width" e "max-width" indicano larghezza minima e rispettivamente massima di un elemento. Possono essere dichiarati sia valori numerici che percentuali.
top, bottom, left, e right
"top", "bottom", "left", e "right" sono le caratteristiche principali per il posizionamento degli elementi. Descrivono la distanza dal bordo della finestra della pagina. "top" indica la distanza dell’elemento verso l’alto, "left" verso sinistra, "bottom" verso il basso e "right" verso destra. Possono essere dichiarati valori numerici, percentuali e "auto".
overflow
"overflow" indica come si devono comportare gli elementi che si sovrappongono l’uno sull’altro. Il contenuto si sovrappone quando un elemento è inferiore ad un altro elemento, nel posizionamento però il box del’elemento inferiore si posiziona fuori dal box dell’elemento superiore. Possono essere dichiarati i valori: "auto", "hidden", "scroll" e "visible".
overflow-x e overflow-y
"overflow-x" e "overflow-y" sono simili a overflow. L’unica differenza è che overflow-x descrive la zona nel caso passa sopra orizzontalmente e overflow-y la zona che passa sopra verticalmente.
position
"position" descrive il metodo di posizionamento dell’elemento. Possono essere dichiarati i valori: "absolute", "fixed", "relative" e "static".
visibility
"visibility" dichiara se e come deve essere visualizzato un elemento. Possono essere dichiarati i valori: "collapse" (viene utilizzato per le celle delle tabelle, colonne, gruppo di celle o gruppo di colonne: l’elemento viene eliminato senza che in questo modo venga toccato il layout della tabella), "hidden" (può essere utilizzato con tutti gli elementi: l’elemento non viene visualizzato) e "visible" (può essere utilizzato con tutti gli elementi: l’elemento viene visualizzato).
z-index
"z-index" descrive su quale layer deve essere l’alemento nel caso che più elementi siano l’uno sopra l’altro. Il layer più in alto viene visto, gli altri sotto no.
Articoli correlati: