Позиція абсолютна, але відносно батьківського

У мене є два діви всередині іншого діви, і я хочу розташувати одну дочірню діву у верхньому правому куті батьківського діва, а іншу дочірню діву в нижній частині батьківського діла за допомогою css. Тобто я хочу використовувати абсолютне позиціонування з двома дочірніми дівами, але розташувати їх відносно батьківського діла, а не сторінки. Як я можу це зробити?

Зразок 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;
}

Це працює , тому що position: absoluteозначає що - щось на зразок «використання top, right, bottom, leftпозиціонувати себе по відношенню до найближчого предка , який має position: absoluteабо position: relative.»

Таким чином , ми робимо #fatherє position: relative, і у дітей position: absolute, а потім використовувати topі bottomдля розміщення дітей.

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

На випадок, коли хтось хоче поставити дитину-діву безпосередньо під батьків

#father {
   position: relative;
}

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

Робоча демонстрація Codepen

Якщо ви не даєте батькові жодної позиції, то вона за замовчуванням займає static. Якщо ви хочете зрозуміти цю різницю, зверніться до цього прикладу

Приклад 1 ::

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

   #mainall
{

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

Тут батьківський клас не має положення, тому елемент розміщується відповідно до body.

Приклад 2 ::

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

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

У цьому прикладі батьків має відносне положення, отже, елемент розташований абсолютним усередині відносного батьківського.