Absolute Position, aber relativ zum übergeordneten Element

Question

Ich habe zwei Divs in einem anderen Div und möchte mithilfe von CSS ein untergeordnetes Div in der oberen rechten Ecke des übergeordneten Divs und das andere untergeordnete Div am unteren Rand des übergeordneten Divs positionieren. Das heißt, ich möchte die absolute Positionierung für die beiden untergeordneten Divs verwenden, sie jedoch relativ zum übergeordneten Div und nicht zur Seite positionieren. Wie kann ich das machen?

Beispiel-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 来定位子项。