绝对但相对于父级的位置

Question

我在另一个div中有两个div，我想使用CSS将一个子div放置在父div的右上方，另一个子div放置在父div的底部。例如，我想对两个子div使用绝对定位，但是相对于父div而不是页面定位它们。我怎么能这么做？

HTML示例：

<div id="father">
   <div id="son1"></div>
   <div id="son2"></div>
</div>

Answer 1

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

Answer 2

#father {
   position: relative;
}

#son1 {
   position: absolute;
   top: 0;
}

#son2 {
   position: absolute;
   bottom: 0;
}

这是因为position:absolute表示类似“使用top、right、bottom、left将自己与具有位置:absolute或position:relative或position:relative的最近祖先的关系定位。”

所以我们让#father有位置:relative,而孩子们有位置:absolute,然后用top和bottom来定位孩子们。