绝对位置但相对于父级

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 将自己定位到与具有 position:absolute 或 position:relative 的最近祖先相关的位置。”

所以我们让#father有position:relative，孩子们有position:absolute，然后使用top code> 和 bottom 来定位子项。