Proprietà per il posizionamento degli elementi

 

Esempi dimostrativi delle funzionalità di alcune proprietà per il posizionamento degli elementi:

· Esempio 1: il posizionamento relativo

· Esempio 2: il posizionamento assoluto

· Esempio 3: la proprietà z-index

 

bottom

La proprietà bottom specifica, per i box posizionati in modo assoluto, la distanza che intercorre tra la parte inferiore dell'elemento e la finestra del browser. 
La proprietà bottom ammette i seguenti valori:

· auto (valore predefinito);

· % (imposta la distanza in percentuale);

· <lunghezza> (imposta la distanza in px, cm, etc.).

p{

position: absolute;

bottom: 20px;

}

In questo esempio l'elemento p si sposta 20 pixel sopra la finestra del browser.

Se la proprietà position ha il valore static, la proprietà bottomnon dà nessun effetto.

torna alla tabella

clip

La proprietà clip serve ad impostare la forma di un elemento.
La proprietà clip ammette i seguenti valori:

· auto (valore predefinito);

· shape (imposta la forma dell'elemento).

img{

clip: rect(10px, 5px, 10px, 5px);

}

Questa proprietà non può essere applicata ad elementi che hanno applicata la proprietà overflow:visible.

torna alla tabella

left

La proprietà left specifica, per i box posizionati in modo assoluto, la distanza che intercorre tra la parte sinistra di un elemento e la finestra del browser.

· auto (valore predefinito);

· % (imposta la distanza in percentuale);

· <lunghezza> (imposta la distanza in px, cm, etc.).

p{

position: absolute;

left: 20px;

}

In questo esempio l'elemento p si sposta 20 pixel alla sinistra della finestra del browser.

Se la proprietà position ha il valore static, la proprietà leftnon dà nessun effetto.

torna alla tabella

overflow

Quando un elemento all'interno di un box supera in larghezza la dimensione impostata per il box stesso, il comportamento del programma utente è regolato dalla proprietà overflow.
La proprietà overflow ammette i seguenti valori:

· visible (valore predefinito);

· scroll (indica che il blocco contenitore deve essere fornito di barre di scorrimento);

· auto (indica che il blocco contenitore deve essere fornito di barre di scorrimento se e solo se richieste);

· hidden (indica che il contenuto eccedente deve essere tagliato).

div{

overflow: scroll;

}

In questo esempio il valore scroll indica che il blocco contenitore (div) deve essere fornito di barre di scorrimento.

Opera 6 e precedenti non gestiscono le barre di scorrimento e interpretano scroll e auto rispettivamente come hidden evisible.

torna alla tabella

position

La proprietà position consente di alterare la posizione di un blocco nel flusso in cui i diversi elementi sono inseriti. 
La proprietà position ammette i seguenti valori:

· static (prevede il normale comportamento dei box all'interno del flusso);

· relative (prevede lo spostamento di un elemento relativamente alla posizione che assume normalmente nel flusso);

· absolute (un blocco posizionato in modo assoluto può essere collocato in un qualsiasi punto della pagina, indipendentemente dalla presenza degli altri elementi all'interno del flusso);

· fixed (lo stesso del posizionamento assoluto con la differenza che i blocchi rimangono ancorati alla posizione iniziale e il riferimento è sempre la finesra del browser).

div{

position:absolute;

left:100px;

top:150px;

}

In questo esempio il box div posizionato in modo assoluto è distanziato 100 pixel da sinistra e 150 pixel dalla parte superiore della finestra del browser.

Il posizionamento fisso (fixed)al momento non è supportato da Internet Explorer 6 e precedenti per Windows.

torna alla tabella

right

La proprietà right specifica, per i box posizionati in modo assoluto, la distanza che intercorre tra la parte destra di un elemento e la finestra del browser.

· auto (valore predefinito);

· % (imposta la distanza in percentuale);

· <lunghezza> (imposta la distanza in px, cm, etc.).

p{

position: absolute;

right: 20px;

}

In questo esempio l'elemento p si sposta 20 pixel alla destra della finestra del browser.

Se la proprietà position ha il valore static, la proprietà rightnon dà nessun effetto.

torna alla tabella

top

La proprietà top specifica, per i box posizionati in modo assoluto, la distanza che intercorre tra la parte superiore di un elemento e la finestra del browser.

· auto (valore predefinito);

· % (imposta la distanza in percentuale);

· <lunghezza> (imposta la distanza in px, cm, etc.).

p{

position: absolute;

top: 20px;

}

In questo esempio l'elemento p si sposta 20 pixel dalla parte superiore della finestra del browser.

Se la proprietà position ha il valore static, la proprietà topnon dà nessun effetto.

torna alla tabella

vertical-align

La proprietà vertical-align consente di alterare la reciproca posizione tra testo e immagine. 
La proprietà vertical-align ammette i seguenti valori:

· baseline (l'elemento è posizionato sulla linea base dell'elemento padre);

· sub (pedice);

· super (apice);

· top (allinea alla parte estrema superiore della linea);

· text-top (allinea alla parte estrema superiore del carattere dell'elemento padre);

· middle (l'elemento è posizionato alla parte centrale dell'elemento padre);

· bottom (allinea alla parte estrema inferiore della linea)

· text-bottom (allinea alla parte estrema inferiore del carattere dell'elemento padre);

· <lunghezza>

· %

img{

vertical-align: baseline;

}

In questo esempio l'elemento img è posizionato sulla linea base dell'elemento padre.

torna alla tabella

z-index

La proprietà z-index stabilisce l'ordine di sovrapposizione quando due o più blocchi posizionati in modo relativo (o assoluto o fisso) si sovrappongono.
La proprietà z-index può essere così espressa:

· auto (valore predefinito);

· <numero>.

div1{

position: relative;

z-index:20;

}

 

div2{

position: relative;

left:1em;

top:-2em;

z-index:10;

}

In questo esempio il blocco div2 si sovrappone al blocco div1.

La proprietà z-index non si applica ai blocchi posizionati in modo statico (static).

torna alla tabella