Блог

У меня есть этот простой код для размещения двух div #container элементов рядом. В каждом из них есть дочерний элемент, div #child который я хотел бы расположить относительно его родительского элемента ( div #container ).

 <style>
.container {
    float:left;
    margin-right: 10px;
}

.child {
    position: absolute;
    left: 0.2ex;
}
</style>

<div class="container">a<br/>
    <div class="child">b</div>
</div>
<div class="container">c<br/>
    <div class="child">d</div>
</div>​
  

Однако, вместо результата, который я ожидал бы — ‘d’ расположен ниже ‘c’, но слегка сдвинут вправо, ‘d’ вместо этого расположен над ‘b’ и немного правее. Другими словами, абсолютное положение было отображено относительно страницы, а не содержащего ее элемента.

1. Почему это так? Что я неправильно понял в абсолютном позиционировании здесь?
2. Как я могу получить поведение, которое я ожидал?

Смотрите этот jsFiddle.

Абсолютно позиционированные элементы позиционируются относительно краев их содержащего блока, который определяется как первый предок, который не является position: static .

Ни один из элементов-предков не позиционируется position: static , так что это относительно начальной позиции окна просмотра.

Установите position: relative на .container элементах, если вы действительно хотите расположить их абсолютно.

Тем не менее, похоже, что вам было бы лучше сделать это вместо этого:

 .child {
    margin-left: 0.2ex;
}
  

Чтобы позиционировать дочерний элемент относительно его родительского элемента, просто добавьте position:relative к РОДИТЕЛЬСКОМУ стилю — тогда все дочерние элементы с position:absolute будут абсолютными относительно родительского элемента.

 .container {
    float:left;
    margin-right: 10px;
    position:relative;
}