Gestione della posizione | Guida CSS

Gestione della=20 posizione

Passiamo ora all'analisi delle propriet=E0 che = concretamente=20 definiscono dove un elemento posizionato va a = collocarsi, dal=20 momento che che con position stabiliamo solo il = come.=20 Le propriet=E0 visibility, clip e = z-index=20 influiscono invece sull'aspetto visuale dei box definendone = la=20 visibilit=E0 e la relazione con gli altri box presenti nella = pagina.

top

Il significato di top cambia secondo la modalit=E0 = di=20 posizionamento.

Per gli elementi posizionati con absolute o = fixed=20 definisce la distanza verticale rispetto al bordo superiore=20 dell'elemento contenitore. Per gli elementi posizionati con=20 relative stabilisce invece l'ammontare dello = spostamento=20 rispetto al lato superiore della posizione originaria. In = questo=20 caso, usando valori positivi il box viene spostato sotto, = mentre con=20 valori negativi lo spostamento avviene verso l'alto (esempio).

Sintassi

<selettore> {top: = <valore>;}

Valori

un valore numerico con unit=E0 di misura=20
un valore in percentuale La percentuale =E8 = relativa=20 all'altezza dell'elemento contenitore.=20
auto

Esempi

div {top: 10px;}
p {top: 10%;}

left

Per gli elementi con posizione assoluta o fissa definisce = la=20 distanza dal bordo sinistro del box contenitore. Per quelli = con=20 posizione relativa stabilisce lo spostamento rispetto al = lato=20 sinistro della posizione originaria. Valori positivi = spostano=20 l'elemento verso destra, valori negativi verso sinistra.

Sintassi

<selettore> {left: = <valore>;}

Valori

un valore numerico con unit=E0 di misura=20
un valore in percentuale La percentuale =E8 = relativa alla=20 larghezza dell'elemento contenitore.=20
auto

Esempi

div {left: 30px;}

bottom

Per i box con posizione assoluta o fissa definisce la = distanza=20 dal bordo inferiore dell'elemento contenitore. Per quelli=20 posizionati relativamente lo spostamento rispetto al lato = inferiore=20 della posizione originaria.

Sintassi

<selettore> {bottom: valore>}

Valori

un valore numerico con unit=E0 di misura=20
un valore in percentuale=20
auto

Esempi

div {bottom: 50px;}

right

Per i box con posizione assoluta o fissa definisce la = distanza=20 dal bordo destro dell'elemento contenitore. Per quelli = posizionati=20 relativamente lo spostamento rispetto al lato destro della = posizione=20 originaria.

Sintassi

<selettore> {right: valore;}

Valori

un valore numerico con unit=E0 di misura=20
un valore in percentuale=20
auto

Esempi

div {right: 50px;}

Per quantpo riguarda la definizione della posizione, va = detto che=20 essa =E8 in ogni caso definita da due coordinate. In genere = si usano=20 le propriet=E0 top e left.

visibility

Questa propriet=E0 determina se un elemento debab essere = visibile o=20 nascosto. Si applica a tutti gli elementi e non =E8 = ereditata.

Sintassi

<selettore> {visibility: = <valore>;}

Valori

visible. L'elemento =E8 visibile. Valore di = default.=20
hidden. L'elemento =E8 nascosto, ma mantiene il = suo posto=20 nel layout dove apparir=E0 come una zona vuota. In ci=F2 = =E8 diverso dal=20 valore none della propriet=E0 display (esempio).

Esempi

div.box {visibility: hidden;}
p = {visibility:=20 visible;}

clip

Definisce la parte di un elemento posizionato che deve = essere=20 visibile. Nella definizione che ne =E8 stata data con CSS2 = non =E8=20 supportata da nessun browser (test).

z-index

Con questa propriet=E0 si imposta l'ordine di = posizionamento dei=20 vari elementi sulla base di una scala di livelli. E' un = meccanismo=20 simile a quello dei layer sovrapposti di Photoshop ed =E8 = utile nel=20 contesto del posizionamento dinamico. In seguito ad un=20 posizionamento, infatti, =E8 possibile che un elemento si = sovrapponga=20 ad un altro rendendolo illeggibile. Impostando lo z-index = =E8=20 possibile modificare l'ordine di tutti gli elementi.

Sintassi

<selettore> {z-index: = <valore>;}

Valori

auto. L'ordine dei livelli =E8 uguale per tutti = gli=20 elementi.=20
un valore numerico. Un valore superiore indica = un=20 livello superiore (esempio).

Esempi

div#box1 {z-index: 34;}

L=20 e z i o n e s u c c e s s i v=20 = a
[ S o m m a r i = o=20 ] =