CSS-Position absolut in Bezug auf ein übergeordnetes Element als relativ

Question

In meiner langen Reise, um meine CSS-Fähigkeiten von dem veralteten Staub, in den sie umgewandelt wurden, zu aktualisieren, habe ich mit bestimmten CSS-Eigenschaften gespielt - besonders z-index - Ich bemerke etwas Seltsames oder vielleicht gibt es eine bestimmte Bedingung.

Beispiel: http://jsfiddle.net/mEpgR/

Das Elternelement div1 cont ist, ich habe div1 Position Eigenschaft auf absolute gemacht, aber wenn ich es verschieben, es bewegt sich zu seinem übergeordneten relativ. Ich hatte den Eindruck, dass Elemente, die auf absolute Positionierung eingestellt sind, ein normaler Outsider-Flow sind und sich nur relativ zum Browser-Port als deren Eltern bewegen.

Was fehlt mir?

Wenn die Geige Link nicht funktioniert, Code:

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

Ein absolutes positioniertes Element ist relativ zu dem ersten Mutterelement, das hat eine andere Position als statisch. Da Sie es in einem Elternteil mit relative haben, wird es absolut relativ zu diesem Elternteil positioniert.

Möglicherweise suchen Sie nach fixed Position, die relativ zum Browserfenster ist.