In CSS un elemento può assumere all’interno del box che lo contiene una posizione ben precisa utilizzando la proprietà – position –
Sono Andrea Tonin di Rovigo, spero che questo corso pratico di CSS vi possa essere utile 
Vediamo un esempio pratico nel seguente codice:
<!DOCTYPE html>
<html>
<head>
<title>Titolo del documento</title>
<style type="text/css">
.esempio1
{
position:relative;/* posizione relativa al box che lo contiene */
width:100px;
height:100px;
background:green;
left:10px;
top:100px;
}
.esempio2
{
position:absolute; /* posizione assoluta nella pagina */
width:100px;
height:100px;
background:blue;
left:110px;
top:100px;
}
.esempio3
{
position:fixed; /* posizione fissa nella pagina */
width:100px;
height:100px;
background:red;
left:10px;
top:100px;
}
</style>
</head>
<body>
<div class="esempio1">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
</div>
<div class="esempio2">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
</div>
<div class="esempio3">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
</div>
</body>
</html>
La proprietà – position – ammette i valori:
– relative= posizione calcolata all’interno del box che lo contiene
– absolute= posizionamento calcolata in assoluto rispetto a tutta la pagina
– fixed= posizione fissa, anche se scorro la pagina resta fermo
– static= posizione segue il normale flusso del documento
Lo accoppiamo solitamente con dei valori di posizionamento come:
– left= posizionamento a sinistra
– top= posizionamento a destra
Vediamo il risultato finale sparso nella pagina
Elemento Blu in alto a sinistra della pagina, scrollate la pagina verso l’alto se non riuscite a vederlo, elemento rosso fisso anche se scrollo la pagina, elemento verde qui sotto, perfettamente integrato nel flusso del documento.
