Posición absoluta pero relativa al padre

Tengo dos divs dentro de otro div, y quiero colocar un div hijo en la parte superior derecha del div padre, y el otro div hijo en la parte inferior del div padre usando css. Es decir, quiero usar el posicionamiento absoluto con los dos div secundarios, pero posicionarlos en relación con el div primario en lugar de la página. ¿Cómo puedo hacer esto?

Muestra 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;
}

Esto funciona porque position: absolutesignifica algo así como "el uso top, right, bottom, leftposicionarse en relación con el antepasado más cercano que tiene position: absoluteo position: relative."

Así que hacemos #fatherhave position: relative, y los niños tienen position: absolute, luego usamos topy bottomposicionamos a los niños.

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

En caso de que alguien quiera colocar un div de niño directamente debajo de un padre

#father {
   position: relative;
}

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

Demo de trabajo Codepen

Si no le da ninguna posición al padre, por defecto se necesita static . Si desea comprender esa diferencia, consulte este ejemplo

Ejemplo 1::

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

   #mainall
{

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

Aquí la clase padre no tiene posición, por lo que el elemento se coloca de acuerdo con el cuerpo.

Ejemplo 2 ::

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

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

En este ejemplo, el padre tiene una posición relativa, por lo tanto, los elementos se posicionan absolutos dentro del padre relativo.