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.
con static (statico) l'elemento viene visualizzato i base alla posizione che occupa nel flusso della pagina.
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:
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.
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>