Lez.3 - Corso Avanzato Css

Position Static e Position Relative in un foglio di stile Css

Position Static e Position Relative

In un Foglio di Stile Css abbiamo la possibilità di cambiare la posizione di un elemento html indipendentemente da quella che è la sua posizione originale.

Questo è possibile sfruttando la proprietà POSITION (posizione) che può assumere i valori di: Static e Relative.

- POSITION STATIC

position: static; valore di defoult (predefinito),
con static (statico) l'elemento viene visualizzato i base alla posizione che occupa nel flusso della pagina.

- POSITIO RELATIVE

position: relative; (relatively: relativamente) con relative l'elemento assume un altro comportamento.
L'elemento rimane sempre inserito nel flusso della pagina ma può essere spostato assegnandogli dei valore.
L'elemento, dal momento in cui diciariamo la proprietà Position ed in particolare position: relative; l'elemento si può spostare di un certo valore sui suoi 4 lati, e i suoi valori sono:
top (superiore, alto)
botton (inferiore, basso)
left (sinistra)
right (destra)

Il Codice:
<!DOCTYPE html>
<html lang="it">                     
 <head>			    
  <title>Position Static e Position Relative</title>
  <meta charset="utf-8">
  <style type="text/css">
    p {
	    background-color: coral;
			
    }
    #pippo {
	    background-color: aqua;
	    position: relative;
	    left: 20px;
	    top: 25px;
    } 
  </style>
 </head>
 <body>
   <h1> Position Static e Position Relative</h1>
   <p>Paragrafo 1</p>
   <p id="pippo">Paragrafo 2</p>
   <p>Paragrafo 3</p>
   <p>Paragrafo 4</p>
 </body>               
</html>