親要素に対する CSS 子要素の配置の実装

解決

親要素に position:relative を追加します。
子要素に position:absolute; right:20px を追加します。

コード

HTML構造

<div id="div1">
	<div id="div2"></div>
</div>

CS

#div1{
	幅:500ピクセル;高さ:500ピクセル;
	背景色: ダークグレー;
	位置:相対;
}
#div2{
	幅:30ピクセル;高さ:30ピクセル;
	背景色:赤;
	位置:絶対;
	右:20px;
}

効果

原理

ブラウザが HTML をレンダリングする場合、ドキュメント フローの概念があります。ブロック レベル要素は新しい行にレンダリングされ、インライン要素はインラインでレンダリングされます。ここでは、2 つの div は両方ともブロック レベル要素で、1 つは親、もう 1 つは子です。通常、レンダリングの結果、親要素はブラウザの左上隅に、子要素は親要素の左上隅に表示されます。

子要素を親要素に対して相対的に配置する場合は、position 属性を使用する必要があります。
位置プロパティ値

親要素を基準とした配置を使用するには、absolute を使用する必要があることはわかっています。absolute を直接使用しても機能しないのはなぜですか?絶対配置は親要素を基準にして使用されるため、親要素には要件があり、親要素の位置は静的であってはなりません。親要素の位置が静的である場合は、位置が静的でない要素が見つかるまで上方向に要素を検索し続け、この要素を相対的に配置します。したがって、親要素の位置を相対的に設定する必要があります。相対配置は通常の位置を基準にしているだけなので、これは効果がありません。通常の位置は、ドキュメント フローのいわゆるデフォルトの出力位置です。オフセット x、y を設定せずに位置を相対的に設定すると、親要素の位置が変わらないのと同じです。

CSS で子要素を親要素に対して相対的に配置する方法についてはこれで終わりです。CSS で子要素を親要素に対して相対的に配置する方法についての詳細は、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。