Posição absoluta, mas relativa ao pai

Eu tenho duas divs dentro de outra div e quero posicionar uma div filho no canto superior direito da div pai e a outra div filho na parte inferior da div pai usando css. Ou seja, eu quero usar o posicionamento absoluto com os dois divs filhos, mas posicione-os em relação ao div pai em vez da página. Como posso fazer isso?

Exemplo de 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;
}

Isso funciona porque position: absolutesignifica algo como "uso top, right, bottom, leftpara posicionar-se em relação ao predecessor mais próximo que tem position: absoluteou position: relative."

Assim, fazemos #fathertem position: relative, e as crianças têm position: absolute, em seguida, usar tope bottomposicionar as crianças.

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

Caso alguém queira posicionar um filho div diretamente sob um pai

#father {
   position: relative;
}

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

Demonstração de trabalho Codepen

Se você não der nenhuma posição aos pais, por padrão, será necessário static. Se você deseja entender essa diferença, consulte este exemplo

Exemplo 1::

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

   #mainall
{

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

Aqui a classe pai não tem posição, então o elemento é colocado de acordo com o corpo.

Exemplo 2 ::

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

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

Neste exemplo, pai possui posição relativa, portanto, o elemento é posicionado absoluto dentro do pai relativo.