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
ようなことを意味するため機能します。top
right
bottom
left
position: absolute
position: relative
相対単位を使用する場合、高さや幅についても同じ原理が働きます。値は、包含ブロック。
そこで、#parent
をとしposition: relative
、子要素を としposition: absolute
、 とtop
を使用しbottom
て子要素を配置します。