絕對位置但相對於父級

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 和bottom 來定位子項。