绝对位置，但相对于父位置

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

#father {
   position: relative;
}

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

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

这工作，因为position: absolute手段类似“使用top，right，bottom，left来定位自己相对于谁拥有最近的祖先position: absolute或position: relative”。

因此，我们使#fatherhave position: relative和子代都有position: absolute，然后使用top和bottom定位子代。