html - 绝对位置但相对于父级

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 的最近祖先定位自己。”

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