Posisi absolut tetapi relatif terhadap orangtua

Saya memiliki dua div di dalam div lain, dan saya ingin memposisikan satu div anak di kanan atas div induk, dan div anak lainnya ke bagian bawah div induk menggunakan css. Yaitu, saya ingin menggunakan posisi absolut dengan dua div anak, tetapi posisikan mereka relatif terhadap div orang tua daripada halaman. Bagaimana saya bisa melakukan ini?

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

Ini bekerja karena position: absoluteberarti sesuatu seperti "penggunaan top, right, bottom, leftmemposisikan diri dalam hubungannya dengan nenek moyang terdekat yang memiliki position: absoluteatau position: relative."

Jadi kami membuat #fathermemiliki position: relative, dan anak-anak memiliki position: absolute, kemudian menggunakan topdan bottommemposisikan anak-anak.

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

Memetikan seseorang ingin memposisikan div anak langsung di bawah orangtua

#father {
   position: relative;
}

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

Demo demo Codepen

Jika Anda tidak memberikan posisi apa pun kepada orang tua maka secara default dibutuhkan static. Jika Anda ingin memahami perbedaan itu, lihat contoh ini

Contoh 1::

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

   #mainall
{

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

Di sini kelas induk tidak memiliki posisi sehingga elemen ditempatkan sesuai dengan tubuh.

Contoh 2 ::

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

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

Dalam contoh ini induk memiliki posisi relatif maka elemen diposisikan absolut di dalam induk relatif.