☰

絶対位置だが親に相対的 質問する

tag-icon • tag-icon html css
絶対位置だが親に相対的 質問する

2 つの div が別の div 内にあり、CSS を使用して、1 つの子 div を親 div の右上に配置し、もう 1 つの子 div を親 div の下部に配置したいと考えています。つまり、2 つの子 div で絶対配置を使用し、ページではなく親 div を基準にして配置したいのです。どうすればいいでしょうか?

サンプル HTML:

<div id="parent">
   <div id="child1"></div>
   <div id="child2"></div>
</div>

ベストアンサー1

#parent {
   position: relative;
}
    
#child1 {
   position: absolute;
   top: 0;
}
  
#child2 {
   position: absolute;
   bottom: 0;
}

これは、「 、、を使用して、またはを持つ最も近い祖先との関係で自分自身を位置付ける」というposition: absoluteようなことを意味するため機能します。toprightbottomleftposition: absoluteposition: relative

相対単位を使用する場合、高さや幅についても同じ原理が働きます。値は、包含ブロック。

そこで、#parentをとしposition: relative、子要素を としposition: absolute、 とtopを使用しbottomて子要素を配置します。

おすすめ記事