Vị trí tuyệt đối nhưng liên quan đến cha mẹ

Tôi có hai div bên trong một div khác và tôi muốn đặt một div con ở phía trên bên phải của div cha và div div khác ở dưới cùng của div cha bằng cách sử dụng css. Tức là tôi muốn sử dụng định vị tuyệt đối với hai div con, nhưng định vị chúng tương đối với div cha hơn là trang. Tôi có thể làm cái này như thế nào?

Mẫu 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;
}

Này hoạt động vì position: absolutenghĩa cái gì đó như "sử dụng top, right, bottom, leftđể vị trí của mình trong mối quan hệ với tổ tiên gần người có position: absolutehay position: relative."

Vì vậy, chúng tôi làm cho #fathercó position: relative, và trẻ em có position: absolute, sau đó sử dụng topvà bottomđịnh vị trẻ em.

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

Trong trường hợp ai đó muốn gửi một div con trực tiếp dưới cha mẹ

#father {
   position: relative;
}

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

Bản làm việc Codepen

Nếu bạn không cung cấp bất kỳ vị trí nào cho cha mẹ thì theo mặc định nó sẽ mất static. Nếu bạn muốn hiểu sự khác biệt đó, hãy tham khảo ví dụ này

Ví dụ 1::

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

   #mainall
{

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

Ở đây lớp cha không có vị trí nên phần tử được đặt theo cơ thể.

Ví dụ 2 ::

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

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

Trong ví dụ này, cha mẹ có vị trí tương đối do đó phần tử được định vị tuyệt đối bên trong cha mẹ tương đối.