Lez.4 - Corso Avanzato Css

POSITION ABSOLUTE
in un foglio di stile Css

Position Absolute

Sintassi: position: absolute;
absolute (assoluto)
quando si assegna alla proprietà position il valore absolute ad un elemento, esso viene:
- rimosso dal flusso della pagina

- assume l'aspeto di un Elemento di Linea, quindi la sua larghezza è relativa al contenuto che contiene

- lo si può spostare sul piano, in qualunque posizione

- perde il suo posto, e viene rimpiazzato dall'elemento che è dopo di esso


Adesso che l'elemento con position: absolute; lo abbiamo staccato dal flusso della pagina lo possimo spostare come vogliamo sfruttando la proprietà offset (top, botton, left, right), e lo possiamo spostare anche a al di la del body, nella così detta viewport (view vista, port porta).

IMPORTANTE riassumendo:
- Se il contenitore ha il valore della proprietà position impostato su static e l'elemento ha la proprietà position con il valore absolte, l'elemento assume qualsiasi posizione (impostata da noi con la proprietà offset impostando i valori di top, botton, left, right) anche all'esterno del suo contenitore, (come nell'esempio del codice del Paragrafo 6 che va in alto e a sinistra della viewport).
- Se il contenitore ha il valore della proprietà position impostato su relative, e l'elemento ha la proprietà position con il valore absolte, l'elemento assume qualsiasi posizione (impostata da noi con la proprietà offset impostando i valori di top, botton, left, right) ma solo all'interno del suo contenitore (come nell'esempio del codice quì sotto del Paragrafo 2 e del Paragrafo 4).

Il Codice:
<!DOCTYPE html>
<html lang="it">                     
 <head>			    
  <title>Position Absolute</title>
  <meta charset="utf-8">
  <style type="text/css">
    body {
	    border: 3px solid red;
	    margin: 30px;
	    position: static;
    }
    p {
	    margin: 0px;
	    border: 1px solid black;
    }
    #pippo {
	    background-color: aqua;
	    position: absolute;
	    top: 0px;
	    left: 0px;
    }
    #topolino {
	    background-color: green;
	    position: absolute;
	    top: 30px;
	    left: 100px;
    }
    div {
	    background-color: yellow;
	    position: relative;
    }
    #divdue {
	    position: static;
    }
    #pluto {
	    background-color: pink;
	    position: absolute;
	    top: 0px;
	    left: 0px;
    } 
  </style>
 </head>
 <body>
   <h1>Position absolute (assoluto) </h1>
   <div>
	    <p>Paragrafo 1</p>
	    <p id="pippo">Paragrafo 2</p>
	    <p>Paragrafo 3</p>
	    <p id="topolino">Paragrafo 4</p>
	    <p>Paregrafo 5</p>
   </div>
   <div id="divdue">
	   <p id="pluto">Paragrafo 6</p>
   </div>
 </body>               
</html>