ตำแหน่งสัมบูรณ์ แต่สัมพันธ์กับพาเรนต์

ฉันมี div สองตัวในอีก div หนึ่งและฉันต้องการวาง div ลูกหนึ่งตัวไว้ที่มุมขวาบนของ div parent และอีก div ลูกอีกอันอยู่ด้านล่างของ div parent โดยใช้ css นั่นคือฉันต้องการใช้การวางตำแหน่งแบบสัมบูรณ์กับ div ลูกสองตัว แต่กำหนดตำแหน่งให้สัมพันธ์กับ div div แทนที่จะเป็นเพจ ฉันจะทำสิ่งนี้ได้อย่างไร

ตัวอย่าง 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 */
}

ในกรณีที่มีคนต้องการโพสต์ div ลูกโดยตรงภายใต้ผู้ปกครอง

#father {
   position: relative;
}

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

การสาธิตการทำงานCodepen

ถ้าคุณไม่ให้ตำแหน่งใด ๆ staticไปยังผู้ปกครองแล้วโดยเริ่มต้นจะใช้เวลา หากคุณต้องการที่จะเข้าใจความแตกต่างที่อ้างถึงตัวอย่างนี้

ตัวอย่างที่ 1 ::

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

   #mainall
{

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

ที่นี่ผู้ปกครองระดับไม่มีตำแหน่งดังนั้นองค์ประกอบถูกวางไว้ตามร่างกาย

ตัวอย่างที่ 2 ::

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

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

ในตัวอย่างนี้ผู้ปกครองมีตำแหน่งสัมพัทธ์องค์ประกอบจึงอยู่ในตำแหน่งที่แน่นอนภายในผู้ปกครองที่เกี่ยวข้อง