Положение абсолютное, но относительно родителя

У меня есть два элемента div внутри другого элемента div, и я хочу расположить один дочерний элемент div в верхнем правом углу родительского элемента div, а другой элемент div - внизу родительского элемента div с помощью css. Т.е. я хочу использовать абсолютное позиционирование с двумя дочерними элементами div, но расположить их относительно родительского элемента div, а не страницы. Как я могу это сделать?

Образец HTML:

<div id="father">
   <div id="son1"></div>
   <div id="son2"></div>
</div>

#father {
   position: relative;
}

#son1 {
   position: absolute;
   top: 0;
}

#son2 {
   position: absolute;
   bottom: 0;
}

Это работает , потому что position: absoluteозначает что - то вроде «использования top, right, bottom, leftпозиционировать себя по отношению к ближайшему предку , который имеет position: absoluteили position: relative.»

Таким образом , мы делаем #fatherесть position: relative, и у детей position: absolute, а затем использовать topи bottomдля размещения детей.

div#father {
    position: relative;
}
div#son1 {
    position: absolute;
    /* put your coords here */
}
div#son2 {
    position: absolute;
    /* put your coords here */
}

В случае, если кто-то хочет выставить ребенка div прямо под родителем

#father {
   position: relative;
}

#son1 {
   position: absolute;
   top: 100%;
}

Рабочая демоверсия Codepen

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

Пример 1 ::

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

   #mainall
{

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

Здесь родительский класс не имеет позиции, поэтому элемент размещается в соответствии с телом.

Пример 2 ::

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

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

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