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.
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