Position relatives Kind eines absolut positionierten Elements

Question

Wie verhalten sich Kinder mit position: relative innerhalb eines Elternteils, das position: absolute hat?

Beispiel (JSFiddle):

<div style="position:relative; float:left; min-width:900px; max-width: 1400px; height:100%;"> 
    <div style="position:absolute; top:0; right:0; width:200px; height:300px;"> 
    <div style="position:relative; top:0; left:0; width:500px; height:100%;"></div> 
    </div> 
</div> 

Wenn ich unterhalb der max-Breite die inneren div bewegt sich außerhalb des übergeordneten Element das Browserfenster verkleinern. Ist das normales Verhalten?

Answer 1

von Genommen: http://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/

Relative[...] es wirklich Was bedeutet ist "relativ zu sich selbst". Wenn Sie position: relative; auf ein Element setzen, aber keine anderen Positionierungsattribute (oben, links, unten oder rechts), wird es keine Wirkung auf seine Positionierung überhaupt wird es genau so sein, wie es wäre, wenn Sie es als Position verlassen würden : statisch; Aber wenn Sie es ein anderes Positionierungsattribut geben, sagen Sie top: 10px;, wird es seine Position 10 Pixel nach unten verschieben, wo es NORMAL sein würde. [...]

Answer 2

Probieren Sie ein paar Dinge zu ändern. Geben Sie Ihrem ersten Div eine tatsächliche Höhe statt nur 100%. Versuchen Sie zweitens, das untergeordnete Element in das übergeordnete Element einzufügen. Im Moment ist es ein 500px Div in einem 200px Div. Für diese spezielle Aufgabe ist es möglicherweise besser außerhalb des übergeordneten Elements positioniert.