Posizionamento assoluto degli elementi in CSS

In questa lezione analizzeremo il posizionamento assoluto degli elementi. Esso permette di posizionare gli elementi secondo coordinate specificate della pagina. Ad esempio, è possibile posizionare un elemento alla posizione 100px dall'alto della pagina e 200px da sinistra. L'elemento si sposterà lì, indipendentemente dal fatto che lì si trovino altri elementi e si posizionerà semplicemente sopra di essi. Si dice che in questo caso l'elemento esce dal flusso normale del documento: tutti gli altri elementi si comporteranno come se il nostro elemento non ci fosse.

Per rendere un elemento posizionato in modo assoluto, è necessario impostare per questo elemento la proprietà position con il valore absolute. Oltre a questa proprietà, sono necessarie altre due: una imposterà la coordinata in verticale, e la seconda - in orizzontale.

Per la verticale è necessario impostare un margine dall'alto, o dal basso. Il margine dall'alto è impostato dalla proprietà top, mentre il margine dal basso - dalla proprietà bottom. Per l'orizzontale è necessario impostare un margine da sinistra, o da destra. Il margine da sinistra è impostato dalla proprietà left, mentre il margine da destra - dalla proprietà right.

Vediamo alcuni esempi.

Esempio

Per cominciare, creiamo semplicemente due blocchi senza posizionamento (nota che gli elementi non sono aderenti al bordo della finestra, poiché body ha margin di default):

<div id="elem1"></div>
<div id="elem2"></div>

#elem1 {
	width: 200px;
	height: 200px;
	border: 1px solid red;
}
#elem2 {
	width: 100px;
	height: 100px;
	border: 1px solid green;
}

Esempio

Ora impostiamo il posizionamento assoluto per il blocco verde, posizionandolo in 150px dall'alto e 100px da sinistra:

<div id="elem1"></div>
<div id="elem2"></div>

#elem1 {
	width: 200px;
	height: 200px;
	border: 1px solid red;
}
#elem2 {
	position: absolute;
	top: 150px;
	left: 100px;
	
	width: 100px;
	height: 100px;
	border: 1px solid green;
}

Esempio

Ora posizioniamo il blocco verde in 0px dall'alto e 0px da sinistra:

<div id="elem1"></div>
<div id="elem2"></div>

#elem1 {
	width: 200px;
	height: 200px;
	border: 1px solid red;
}
#elem2 {
	position: absolute;
	top: 0px;
	left: 0px;
	
	width: 100px;
	height: 100px;
	border: 1px solid green;
}

Esempio

Ora posizioniamo il blocco verde in 0px dall'alto e 0px da destra:

<div id="elem1"></div>
<div id="elem2"></div>

#elem1 {
	width: 200px;
	height: 200px;
	border: 1px solid red;
}
#elem2 {
	position: absolute;
	top: 0;
	right: 0;
	
	width: 100px;
	height: 100px;
	border: 1px solid green;
}

Esempio

Ora posizioniamo il blocco verde in 0px dal basso e 0px da destra:

<div id="elem1"></div>
<div id="elem2"></div>

#elem1 {
	width: 200px;
	height: 200px;
	border: 1px solid red;
}
#elem2 {
	position: absolute;
	bottom: 0;
	right: 0;
	
	width: 100px;
	height: 100px;
	border: 1px solid green;
}

Esempio

Ora posizioniamo il blocco verde in 0px dal basso e 0px da sinistra:

<div id="elem1"></div>
<div id="elem2"></div>

#elem1 {
	width: 200px;
	height: 200px;
	border: 1px solid red;
}
#elem2 {
	position: absolute;
	bottom: 0;
	left: 0;
	
	width: 100px;
	height: 100px;
	border: 1px solid green;
}

Compiti pratici

Utilizzando il posizionamento assoluto, posiziona i blocchi nel modo seguente: