Позиционировать относительный дочерний элемент с абсолютным позиционированием

Как дети с position: relative должны вести себя внутри родителя с position: absolute?

Например (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>

Когда я сжимаю окно браузера ниже максимальной ширины, внутренний div перемещается за пределы своего родительского элемента. Это нормальное поведение?


css css-position
person Chuck    schedule 09.04.2012    source источник
comment
Пожалуйста, уточните свой вопрос... что именно вы имеете в виду под перемещением за пределы родительского элемента? Можете ли вы дать больше контекста?   -  person MarioDS    schedule 10.04.2012

Ответы (2)


arrow_upward
0
arrow_downward

Попробуйте изменить несколько вещей. Во-первых, дайте вашему первому div фактическую высоту, а не просто 100%. Во-вторых, попробуйте разместить дочерний элемент внутри своего родителя. Прямо сейчас это div размером 500px внутри div размером 200px. Для этой конкретной задачи его лучше расположить за пределами родителя.

person user1161032    schedule 09.04.2012

arrow_upward
0
arrow_downward

Взято с: http://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/

Относительно [...] На самом деле это означает "относительно самого себя". Если вы установите position: relative; для элемента, но нет других атрибутов позиционирования (верхний, левый, нижний или правый), это не повлияет на его позиционирование вообще, оно будет точно как если бы вы оставили его как position: static; Но если вы ДЕЙСТВИТЕЛЬНО присвоите ему какой-либо другой атрибут позиционирования, скажем, top: 10px;, он сдвинет свое положение на 10 пикселей ВНИЗ от того места, где оно должно быть НОРМАЛЬНО. [...]

person Jake Toolson    schedule 09.04.2012