Vai ai contenuti

LAU



Home > Proprietà CSS2 > Proprietà per il posizionamento degli elementi


Proprietà CSS2

Proprietà per il posizionamento degli elementi

Tabella riassuntiva e descrittiva delle funzionalità, valori e supporto dei browser relativa alla specifiche dei CSS2 per la gestione del posizionamento degli elementi.

  • NN: indica da quale versione di Netscape Navigator viene supportata la proprietà.
  • IE: indica da quale versione di Internet Explorer viene supportata la proprietà.
  • MF: indica da quale versione di Mozilla Firefox viene supportata la proprietà.
Proprietà Valori IE NN MF
bottom auto
%
<lunghezza>
5.0 6.0 1.0
clip shape
auto
4.0 6.0 1.0
left auto
%
<lunghezza>
4.0 4.0 1.0
overflow visible
hidden
scroll
auto
4.0 6.0 1.0
position static
relative
absolute
fixed
4.0 4.0 1.0
right auto
%
<lunghezza>
5.0 6.0 1.0
top auto
%
<lunghezza>
4.0 4.0 1.0
vertical-align baseline
sub
super
top
text-top
middle
bottom
text-bottom
<lunghezza>
%
4.0 4.0 1.0
z-index auto
numero
4.0 6.0 1.0

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

torna alla lista completa delle proprietà

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à bottom non 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à left non 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 e visible.

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à right non 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à top non 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

[ Torna all’inizio della pagina ]



Sito realizzato dal Laboratorio di Accessibilità e Usabilità del CSI-Piemonte - Privacy, cookies e accessibilità

[ Torna all’inizio della pagina ]