Come usare la proprietà position.

I box model possono essere posizionati nella pagina web attraverso vaie tecniche, le più utilizzate fanno ricorso alle proprietà css “position” e “float”. In questo tutorial vediamo come posizionare gli elementi con “position”. Attraverso questa proprietà l'elemento viene posizionato rispetto al suo box contenitore. Il posizionamento viene fatto in base alle coordinate date dalle proprietà top, right, bottom, left.

POSITION RELATIVE

Facciamo un esempio disegnando un box di colore verde e successivamente un box di colore rosso a cui associamo la position relative per posizionarlo in maniera diversa.

Codice:
Nel body della pagina web scriviamo:

<div class="box1">box 1</div>
<div class="box2">box 2</div>

Nel css scriviamo:

.box1 { 
	background-color:#0c3;
	width:200px;
	height:100px;
}
.box2 { 
	background-color:#f00;
	width:200px;
	height:100px;
	position:relative;
	left:30px;
	top:30px;
}

Risultato:

immagine position relative

Il box rosso si dispone sotto quello verde spostandosi di 30px dalla sua sinistra e 30px dal margine inferiore del box verde.

POSITION ABSOLUTE

Vediamo adesso come si comporta la position absolute. In questo tipo di posizione il box si posiziona sempre rispetto all'elemento contenitore. Gli elementi posizionati con absolute vengono rimossi dal normale flusso html.
Riprendiamo l'esercizio precedente cambiando il tipo di position al box 2.

Codice:
Scriviamo lo stesso codice che abbiamo usato per la position relative, andando a cambiare solo una riga nel css, eliminiamo la position relative al box 2 e scriviamo:

position:absolute;

Risultato:

immagine position relative

Adesso la posizione del box rosso non risente più del fatto che esiste un elemento che lo precede nel flusso dell'html (box verde), ma assume dei valori assoluti, posizionandosi a 30px dall'alto e a 30px dalla sinistra della finestra del browser.

POSITION RELATIVE E ABSOLUTE

Facciamo un altro esempio cambiando l'elemento contenitore del box rosso, inserendolo dentro un altro contenitore che non sia la finestra del browser. Per fare questo disegniamo un terzo box di colore blu.

Codice:
Riprendiano il codice dell'esempio precedente facendo alcune modifiche. Nel body della pagina web scriviamo:

<div class="box3">box 3
    <div class="box2">box 2</div>
</div>

Il box 2 adesso è contenuto nel box 3.

Nel css creiamo una classe per il box 3 scrivendo:

.box3 { 
	background-color:#00f;
	width:300px;
	height:150px;
	position:relative;
	left:50px;
	top:50px;
}

Risultato:

immagine position relative

In questo esempio il box blu ha position relative mentre il box rosso ha la position absolute. Il box rosso si posiziona a 30px dal margine alto e a 30px dal margine sinistro del div blu.

Nel codice html il div rosso è stato inserito dentro in div blu. Il div blu diventa quindi elemento contenitore del div rosso e in effetti esso appare inserito nel div blu. Ma questa cosa funziona solo se al div blu associamo la position:relative. Se eliminiamo la position relative al div blu, il div rosso tornerà a posizionarsi rispetto alla finestra del browser, anche se nell'html risulta essere dentro il div blu.

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *