[解決済み] 位置は絶対だが、親に対して相対的

質問

divの中に2つのdivがあり、1つの子divを親divの右上に、もう1つの子divを親divの下にcssで配置したいのですが、可能でしょうか？つまり、2 つの子 div で絶対配置を使用し、ページではなく親 div に対して相対的に配置したいのです。どうすればいいでしょうか？

サンプルhtmlです。

<div id="father">
   <div id="son1"></div>
   <div id="son2"></div>
</div>

解決方法は？

#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 を使用して子要素を配置します。