Pozycja bezwzględna, ale względem rodzica

Mam dwa div div wewnątrz innego div i chcę ustawić jeden div div w prawym górnym rogu div rodzica, a drugi div div na dole rodzica div za pomocą css. Tzn. Chcę użyć pozycjonowania bezwzględnego z dwoma div div, ale ustaw je względem div diva, a nie strony. W jaki sposób mogę to zrobić?

Przykładowy 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;
}

To działa, ponieważ position: absoluteoznacza coś jak „użytku top, right, bottom, leftaby ustawić się w stosunku do najbliższego przodka, który ma position: absolutelub position: relative”.

Więc robimy #fathermieć position: relative, a dzieci mają position: absolute, a następnie użyć topi bottomdo położenia dzieci.

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

Jeśli ktoś chce umieścić div dziecka bezpośrednio pod rodzicem

#father {
   position: relative;
}

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

Działające demo Codepen

Jeśli nie podasz żadnej pozycji rodzicowi, wówczas domyślnie zajmie static. Jeśli chcesz zrozumieć tę różnicę, zapoznaj się z tym przykładem

Przykład 1::

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

   #mainall
{

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

Tutaj klasa nadrzędna nie ma pozycji, więc element jest umieszczany zgodnie z treścią.

Przykład 2 ::

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

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

W tym przykładzie rodzic ma pozycję względną, dlatego element jest pozycjonowany absolutnie wewnątrz względnego rodzica.