Posizione assoluta 2

Vogliamo qui mostrare come il posizionamento assoluto vada sempre riferito all'elemento contenitore e come se quest'ultimo non presenta un valore di posizionamento diverso da static il posizionamento stesso si riferirà all'elemento HTML, ovvero al viewport del browser.

Definiamo due div con queste caratteristiche:

#div5 {
width: 400px;
background: silver;
border: 2px solid black;
}

#div6 {
position: absolute;
top: 20px;
left: 20px;
width: 200px;
border: 1px solid black;
background : Teal;
}

Useremo il primo div come elemento contenitore del secondo. Notate che #div5 non ha alcun valore relativo alla posizione: assume pertanto il valore di default static.

Questo è #div5
Questo è #div6

Il risultato lo vedete da voi. #div6 non è posizionato rispetto a #div5, ma al viewport (è lì in alto).

Ora inseriamo #div6 al'interno di un altro div. Il risultato sarà quello desiderato.

#div7 {
position: absolute;
width: 400px;
background: silver;
border: 2px solid black;
}

Questo è #div7

 

 

 

 

Questo è #div6