Позиционирование absolute относительно родительского элемента

В данном коде CSS мы видим два элемента с абсолютным позиционированием (div#son1 и div#son2), которые находятся внутри родительского элемента с относительным позиционированием (div#father).

Важный момент заключается в том, что абсолютное позиционирование работает относительно ближайшего родительского элемента с относительным или абсолютным позиционированием. В этом случае, div#son1 и div#son2 будут позиционироваться относительно div#father.

Чтобы установить координаты для детей, вам необходимо заменить комментарий /* put your coords here */ на соответствующие значения, например:

div#son1 {
    position: absolute;
    top: 10px;  /* отступ сверху */
    left: 20px; /* отступ слева */
}

div#son2 {
    position: absolute;
    top: 50px;  /* отступ сверху */
    left: 70px; /* отступ слева */
}

Таким образом, вы можете контролировать расположение дочерних элементов внутри родителя. Не забудьте подставить свои значения координат в соответствии с тем, где вы хотите расположить элементы.

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

Пример 1:

http://jsfiddle.net/Cr9KB/1/

#mainall {
    background-color: red;
    height: 150px;
    overflow: scroll;
}

В этом примере у родительского класса отсутствует свойство position, поэтому элемент располагается относительно тела страницы.

Пример 2:

http://jsfiddle.net/Cr9KB/2/

#mainall {
    position: relative;
    background-color: red;
    height: 150px;
    overflow: scroll;
}

В этом примере у родительского элемента задано значение relative, следовательно, дочерние элементы располагаются абсолютно относительно этого относительного родителя.