Mutlak fakat ebeveyne göre konumlandırma

Başka bir div içinde iki div var ve bir div div üst div div üst sağa ve diğer child div css kullanarak üst div div altına konumlandırmak istiyorum. Yani, iki alt div ile mutlak konumlandırma kullanmak istiyorum, ancak onları sayfa yerine ana div ile göreceli olarak konumlandırmak istiyorum. Bunu nasıl yapabilirim?

Örnek 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;
}

Bu çalışmalar nedeniyle position: absolutebenzeri yollarla şey "kullanımı top, right, bottom, leftsahip en yakın atası olmak, kendini konumlandırmak position: absoluteya position: relative."

Böylece biz #father var position: relativeve çocuklar var position: absolute, sonra kullanmak topve bottomçocukları konumlandırmak için.

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

Birisi doğrudan bir ebeveyn altında bir çocuk div ilan etmek isterse

#father {
   position: relative;
}

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

Çalışma demosu Codepen

Ebeveyne herhangi bir pozisyon vermezseniz, varsayılan olarak alır static. Bu farkı anlamak istiyorsanız, bu örneğe bakın

Örnek 1::

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

   #mainall
{

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

Burada ana sınıfın konumu yoktur, bu nedenle eleman gövdeye göre yerleştirilir.

Örnek 2 ::

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

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

Bu örnekte ebeveynin göreceli konumu vardır, bu nedenle eleman bağıl ebeveyne mutlak yerleştirilir.