Posizione CSS assoluta rispetto a un elemento padre che agisce come relativo

Question

Nel mio lungo viaggio per aggiornare le mie competenze CSS dalla polvere deprecata in cui si sono trasformati, ho giocato con determinate proprietà CSS, in particolare con z-index: Sto notando qualcosa di strano o forse c'è una certa condizione.

Esempio: http://jsfiddle.net/mEpgR/

genitore del div1 elemento è cont, ho fatto proprietà position di div1 impostato in assoluto, ma quando sposto esso, è in movimento rispetto al suo genitore. Ho avuto l'impressione che gli oggetti impostati sul posizionamento assoluto siano flussi regolari esterni e si spostano solo rispetto alla porta del browser come loro padre.

Cosa mi manca?

Se il collegamento violino non funziona, il codice:

CSS:

.cont { 
position:relative; 
height:200px; 
top:200px; 
left:100px; 
background: green; width: 200px; 
} 

.div1 { 
background:red; 
position:absolute; 
top:50px; 
} 

HTML:

<div class="cont"> 
<div class="div1">DIV1</div> 
</div> 

Answer 1

Un elemento posizionato assoluto è posizionato rispetto al primo elemento padre che ha una posizione diversa da statica. Dal momento che lo hai all'interno di un genitore con relative sarà assolutamente posizionato rispetto a questo genitore.

È possibile che si stia cercando la posizione fixed, che è relativa alla finestra del browser.