lezioni sui siti web.                          prof.Romei Michele

position

Gli elementi html si dispongono all'interno di una pagina web a seconda delle loro caratteristiche. 
Gli "elementi a livello di blocco" (<h1..h6>, <p>, <div>, etc.) si dispongono uno di seguito all'altro in verticale, distanziandosi in base ai margini.

Invece, gli "elementi in linea" (<strong>, <span>, <a>, etc.) si dispongono orizzontalmente uno di seguito all'altro, su una o più linee a seconda dello spazio a disposizione.

Con il normale flusso degli elementi non è però possibile realizzare layout elaborati, poichè la sola disposizione possibile per i blocchi è la successione verticale degli stessi.

Ricordiamoci i nomi assegnati alle varie parti :




position:static

Esempio pratico di utilizzo della proprietà per il posizionamento statico. Di seguito viene mostrato anche il codice CSS completo.

Esempio:




Codice CSS:

div#box-1{
position:static;
border:solid;
padding:0.4em;
background-color:#eee;
color: #900;
width:500px;
}
div#box-2{
position:static;
border:solid;
padding:0.4em;
background-color:#eee;
color: #900;
width:500px;
}
div#box-3{
position:static;
border:solid;
padding:0.4em;
background-color:#eee;
color: #900;
width:500px;
}

In questo esempio è possibile notare come attraverso l'utilizzo della proprietà position:static è possibile disporre i tre box uno di seguito all'altro in verticale. La distanza che li separa è stabilità dai valori che vengono assegnati ai margini. bene precisare che pur non applicando la proprietà position:static ai tre box è possibile ottenere lo stesso risultato. Ciò si verifica perchè la normale disposizione degli elementi di blocco prevede la successione verticale degli stessi (di default la proprietà position è static).

position:relative

Con la proprietà position:relative è possibile definire uno spostamento del div rispetto alla posizione che normalmente assumerebbe di default. Lo spostamento è assegnato tramite le proprietà:

I valori ammessi, percentuali e lunghezze (em, px, etc.), possono essere sia positivi che negativi. 
Ad esempio:

div{
top:-25px;
left:100px;
}

top indica la distanza che separa il bordo superiore del div con gli altri elementi.
right indica la distanza che separa il bordo destro del div con gli altri elementi. 
bottom indica invece la distanza che separa il bordo inferiore del div con gli altri elementi.
left indica la distanza che separa il bordo sinistro del div con gli altri elementi.

Struttura generale HTML

Questo è il codice html essenziale che abbiamo utilizzato per realizzare il nostro primo esempio.

<div id="box-1"> ... </div>
<div id="box-2"> ... </div>
<div id="box-3"> ... </div>

a) position:relative

Esempio pratico di utilizzo delle proprietà per il posizionamento relativo.Di seguito viene mostrato anche il CSS completo.

Esempio:






Codice CSS:

div#box-1{
position:static;
margin:10px;
border:solid;
padding:0.4em;
background-color:#eee;
color: #900;
width:500px;
}
div#box-2{
position:relative;
border:solid;
padding:0.4em;
left:1.8em;
top:0.5em;
width:450px;
background-color:#fafafa;
color: #900;
}
div#box-3{
position:static;
margin:10px;
border:solid;
padding:0.4em;
background-color:#eee;
color: #900;
width:500px;
}

In questo esempio ci sono tre div, due posizionati in modo statico e uno posizionato in modo relativo. Tramite i valori assegnati alle proprietà top e left il secondo blocco è spinto 0.5em verso il basso e 1.8em verso destra rispetto alla posizione che assumerebbe nel normale flusso.

Per la realizzazione del secondo esempio, invece, è stato necessario modificare leggermente l'html dell'esempio precedente. Questo è il codice:

<div id="box-1"> ... </div>
<div id="box-2">
 <div id="box-2a"> ... </div>
</div>
<div id="box-3"> ... </div>

b) position:relative

Esempio pratico di utilizzo delle proprietà per il posizionamento relativo. Di seguito viene mostrato anche il CSS completo.

Esempio:




Codice CSS:

div#box-1{
position:static;
margin:10px;
border:solid;
padding:0.4em;
background-color:#eee;
color: #900;
width:500px;
}
div#box-2{
position:relative;
border:solid;
padding:0.4em;
left:1.8em;
top:0.5em;
width:400px;
background-color:#fafafa;
color: #900;
margin:5px 10px 20px 20px;
}
div#box-2a{
position:relative;
border:solid;
padding:0.4em;
left:232px;
bottom:0;
width:150px;
background-color:#ffffaa;
color: #900;
}
div#box-3{
position:static;
margin:10px;
border:solid;
padding:0.4em;
background-color:#eee;
color: #900;
width:500px;
}

In questo esempio ci sono 4 div, due posizionati in modo statico e due posizionati in modo relativo. Uno dei box posizionati in modo relativo (div box-2a) è contenuto in div box-2. Tramite i valori assegnati alle proprietà bottom e left il box-2a è ancorato alla posizione 0 verso il basso all'interno del box-2 e spostato di 232px verso destra rispetto alla posizione che assumerebbe all'interno del box-2.

position:relative + z-index: numero

Quando due o più blocchi (div) posizionati in modo relativo si sovrappongono, l'ordine di sovrapposizione è determinato dalla proprietà z-index, la quale ammette solo valori costituiti da numeri interi non negativi. I div con z-indexmaggiore coprono i div con z-index minore.

Struttura generale HTML

Questo è il codice html essenziale che abbiamo utilizzato per realizzare il nostro esempio.

<div id="box-1"> ... </div>
<div id="box-2"> ... </div>
<div id="box-3"> ... </div>

Esempio pratico di utilizzo della proprietà relative + z-index. Di seguito viene mostrato anche il CSS completo.


Esempio:

Codice CSS:

#box-1{
position:static;
border:solid;
padding:0.4em;
width:250px;
background-color:#eee;
color: #900;
}
#box-2{
position:relative;
z-index:20;
border:solid;
padding:0.4em;
left:8em;
top:1.3em;
width:200px;
background-color:#fafafa;
color: #900;
}
#box-3{
position:relative;
z-index:10;
border:solid;
padding:0.4em;
left:0.8em;
top:-1em;
width:300px;
background-color:#fafafa;
color: #900;
}

In questo esempio abbiamo tre div: uno posizionato in modo statico e due posizionati in modo relativo. Tramite i valori assegnati alle proprietà top e left si verifica una sovrapposizione dei blocchi box-2 e box-3. In questo caso l'ordine di sovrapposizione è determinato dal valore numerico che abbiamo attribuito alla proprietà z-index. Il numero 10 sta ad indicare che il blocco box-2 deve apparire prima del blocco box-3 poichè il div con z-index maggiore copre quello con z-index minore.

position: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. Un blocco posizionato in modo assoluto può essere collocato anche in relazione ad un altro elemento che lo contiene.

Struttura generale HTML. Questo è il codice html essenziale che abbiamo utilizzato per realizzare il nostro esempio.

<div id="contenitore">
 <div id="box-1"> ... </div>
 <div id="box-2"> ... </div>
 <div id="box-3"> ... </div>
</div>

Esempio pratico di utilizzo della proprietà position:absolute. Di seguito viene mostrato anche il CSS completo.

Esempio:

Codice CSS:

#contenitore-box{
position:relative;
}
#box-1{
position:absolute;
left:212px;
top:27px;
border:2px solid #900;
padding:0.4em;
width:147px;
background-color:#fafafa;
color: #900;
}
#box-2{
position:absolute;
left:405px;
top:27px;
border:2px solid #900;
padding:0.4em;
width:170px;
background-color:#fafafa;
color: #900;
}
#box-3{
position:absolute;
left:50px;
top:27px;
border:2px solid #900;
padding:0.4em;
width:116px;
background-color:#fafafa;
color: #900;
}

In questo esempio abbiamo utilizzato tre div con position:absolute contenuti in un div contenitore. L'effetto dei tre div affiancati l'uno accanto all'altro è realizzato grazie ai valori assegnati a top e left. Infatti, avendo assegnato a tutti e tre i box la stessa altezza per fare affiancare i box l'uno accanto all'altro è stato sufficiente regolare lo spazio laterale che li separa. Bisogna comunque considerare che nel nostro caso il riferimento per i tre box è il blocco contenitore-boxposizionato in modo relativo, poichè, se i tre box fossero stati racchiusi all'interno di un altro div contenitore con altre caratteristiche, essi si sarebbero posizionati in relazione a quel blocco. Se consideriamo la proprietà left:212px assegnata al box-1 significa che ilbox-1 si scosta di 212 pixel dalla parte sinistra del box contenitore-box mentre la proprietà top:27pxspecifica che il box si scosta di 27 pixel dalla parte superiore del div contenitore-box. Il posizionamento dei blocchi uno affiancato all'altro è comunque realizzabile anche con altre tecniche più raffinate, con la proprietà float:left ad esempio, che vedremo più avanti.


Esempio pratico di utilizzo della proprietà position:absolute utilizzata con position:relative. Di seguito viene mostrato anche il CSS completo.



Codice CSS:

div#contenitore{
position:relative;
left:180px;
top:-77px;
background-color:#fafafa;
border:2px solid #900;
padding:0.4em;
width:500px;
height:100px;
color: #900;
}
#box-1{
position:static;
margin-left:10px;
margin-top:10px;
border:2px solid #900;
padding:0.4em;
width:147px;
background-color:#fafafa;
color: #900;
}
#box-2{
position:absolute;
right:5px;
top:5px;
border:2px solid #900;
padding:0.4em;
width:120px;
background-color:#fafafa;
color: #900;
}

In questo esempio abbiamo utilizzato tre div: il box-1 con position:static, il box-2 conposition:absolute e il box contenitore con position:relative. Quello che qui ci preme sottolineare è il fatto che Il box-2 è collocato all'interno del div contenitore e pertanto la sua posizione (right:5px e top:5px) è relativa al blocco che lo contiene, ovverodiv="contenitore".

position:relative + position:absolute

Un blocco posizionato in modo assoluto può essere collocato in relazione al blocco che lo contiene. Questo è il codice html essenziale che abbiamo utilizzato per realizzare il nostro esempio.

<div id="box-1"> ... </div>
 <div id="contenitore">
  <div id="box-2"> ... </div>
 </div>
<div id="box-3"> ... </div>

Esempio pratico di utilizzo della proprietà position:absolute utilizzata con position:relative. Di seguito viene mostrato anche il CSS completo.


Codice CSS:

div#contenitore{
position:relative;
left:180px;
top:-77px;
background-color:#fafafa;
border:2px solid #900;
padding:0.4em;
width:500px;
height:100px;
color: #900;
}
#box-1{
position:static;
margin-left:10px;
margin-top:10px;
border:2px solid #900;
padding:0.4em;
width:147px;
background-color:#fafafa;
color: #900;
}
#box-2{
position:absolute;
right:5px;
top:5px;
border:2px solid #900;
padding:0.4em;
width:120px;
background-color:#fafafa;
color: #900;
}

In questo esempio abbiamo utilizzato tre div: il box-1 con position:static, il box-2 con position:absolute e il box contenitore con position:relative. Quello che qui ci preme sottolineare è il fatto che Il box-2 è collocato all'interno del div contenitore e pertanto la sua posizione (right:5px e top:5px) è relativa al blocco che lo contiene, ovvero div="contenitore".

Due blocchi posizionati in modo assoluto possono essere collocati in relazione al blocco che li contiene.

Struttura generale HTML

Questo è il codice html essenziale che abbiamo utilizzato per realizzare il nostro esempio.

<div id="contenitore">
 <div id="box-1"> ... </div>
 <div id="box-2"> ... </div>
</div>


Codice CSS:

div#contenitore{
position:relative;
left:10px;
top:10px;
background-color:#fafafa;
border:2px solid #900;
padding:0.4em;
width:500px;
height:100px;
color: #900;
}
#box-1{
position:absolute;
right:5px;
top:5px;
border:2px solid #900;
padding:0.4em;
width:120px;
background-color:#fafafa;
color: #900;
}
#box-2{
position:absolute;
left:5px;
bottom:5px;
border:2px solid #900;
padding:0.4em;
width:120px;
background-color:#fafafa;
color: #900;
}

In questo esempio abbiamo racchiuso all'interno del div contenitore posizionato in modo relativo due div (box-1 e box-2) posizionati in modo assoluto. I due div assoluti si posizionano all'interno del div relativo in base alle coordinate definite dai valori right:5pxe top:5px per il box-1 e left:5px e bottom:5px per il box-2.

position:fixed

Il posizionamento fisso ha una funzione molto simile al posizionamento assoluto con la differenza che il riferimento per il posizionamento è sempre la finestra del browser. Il problema della proprietà position:fixed è che non è supportata da Internet Explorer 6 e precedenti per Windows. Nell'esempio che segue il posizionamento funzionerà correttamente su Internet Explorer 6 e precedenti poichè è stata utilizzata la tecnica di Edwards :




che consente di risolvere il baco del browser della Microsoft. La struttura generale HTML in questo esempio, per fare comprendere meglio il funzionamento del posizionamento fisso, abbiamo deciso di presentarvi la pagina d'esempio priva di descrizioni. La relativa descrizione e il CSS utilizzato verrano riportati qui di seguito. Innanzitutto, questo è il codice html essenziale che abbiamo utilizzato:

<div id="box-1"> ... </div>
<div id="box-2"> ... </div>

e questo invece è il foglio di stile associato:

#box-1{
position:fixed;
left:350px;
width:300px;
background-color:#FFE479;
border:1px solid #000;
font-size:1em;
}
#box-2{
width:300px;
height:800px;
background-color:#FFE479;
border:1px solid #000;
margin:15px;
font-size:1em;
}

Questo è invece l'esempio concreto:




È possibile notare come il box-2, che sta sulla destra del box-1, allo scorrere della pagina rimanga fisso, ovvero ancorato alla parte superiore della pagina. Infatti, la proprietà left lo posiziona alla sinistra della finestra del browser di 350 pixel e la proprietàposition:fixed fa sì che il box rimanga ancorato e fisso a quella posizione.

float

Con questa proprietà è possibile rimuovere un elemento dal normale flusso del documento e spostarlo su uno dei lati (destro o sinistro) del suo elemento contenitore. Il contenuto che circonda l'elemento scorrerà intorno ad esso sul lato opposto rispetto a quello indicato come valore di float. Pertanto i valori ammessi dalla proprietà floatsono:

Questo è il codice html essenziale che abbiamo utilizzato per realizzare il nostro esempio.

<div id="box-1"> ... </div>
<div id="box-2"> ... </div>

Esempio pratico di utilizzo della proprietà float. Di seguito viene mostrato anche il CSS completo.


Codice CSS:

#box-1{
float:left;
margin:10px;
border:2px solid #900;
padding:0.4em;
width:300px;
height:100px;
background-color:#eee;
color: #900;
}
#box-2{
float:left;
margin:10px;
border:2px solid #900;
padding:0.4em;
width:300px;
height:100px;
background-color:#fafafa;
color: #900;
}

In questo esempio è possibile notare come attraverso l'utilizzo della proprietà float:left è possibile disporre i due box uno accanto all'altro in orizzontale. La distanza che li separa è stabilità invece dai valori assegnati ai margini.

float + clear

La proprietà clear serve a impedire che al fianco di un elemento compaiano altri elementi con il float. Si applica solo agli elementi blocco. Visto che il float sposta un elemento dal flusso normale del documento, è possibile che esso venga a trovarsi in posizioni non desiderate, magari al fianco di altri elementi che vogliamo invece tenere separati. La proprietà clear risolve questo problema. La proprietà clear ammette i seguenti valori:

Questo è il codice html essenziale che abbiamo utilizzato per realizzare il nostro esempio.

<div id="box-1"> ... </div>
<div id="box-2"> ... </div>
<div id="box-3"> ... </div>

Esempio pratico di utilizzo della proprietà float utilizzata assieme alla proprietà clear.
Di seguito viene mostrato anche il CSS completo.


Codice CSS:

#box-1{
float:left;
border:2px solid #900;
margin:5px;
padding:0.4em;
width:350px;
height:100px;
background-color:#fafafa;
color: #900;
}
#box-2{
float:right;
border:2px solid #900;
margin:5px;
padding:0.4em;
width:300px;
height:100px;
background-color:#fafafa;
color: #900;
}
#box-3{
clear:right;
border:2px solid #900;

margin:5px;

padding:0.4em;
width:300px;
height:100px;
background-color:#fafafa;
color: #900;
}

In questo esempio abbiamo utilizzato tre div: box-1 e box-2 con float rispettivamente left eright; il box-3 con clear:right.  Grazie alla proprietà clear:right è possibile annullare l'effetto della proprietà float:right del box-2.

In questa sezione mostreremo come è possibile sfruttare le proprietà per il posizionamento degli elementi html per generare layout complessi.




torna alla pagina precedente