CSSの子要素を親要素に対して相対的に配置するにはどうすればよいですか?

CSS では、position 属性を使用して、親要素の相対配置 "position:relative;" スタイルと絶対配置 "position:" スタイルを設定することで、親を基準とした子要素の相対配置を実現できます。子要素の絶対;" スタイル。要素の位置。

このチュートリアルの動作環境: Windows7 システム、css2 バージョンこの方法は、すべてのブランドのコンピューターに適しています。

関連する推奨事項: 「プログラミング ビデオ コース」

css で親要素を基準とした子要素の配置を実装する方法

親レベル要素のスタイル設定:

position:relative;

子要素のスタイル:

position:absolute;

サンプルコード:

html 構造

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

css

#div1{
width:500px;height:500px;
background-color:darkgray;
position:relative;
}
#div2{
width:30px;height:30px;
background-color:red;
position:absolute;
right:20px;
}

効果

原則

ブラウザはドキュメント フローと呼ばれる HTML をレンダリングし、ブロックします。レベル要素 ラインラップレンダリング、インライン要素のインラインレンダリング、ここでは、2 つの div はブロックレベル要素で、親要素が 1 つ、子要素が 1 つです。通常のレンダリング結果は、親要素がブラウザの左上隅にあり、子要素がブラウザの左上隅にあります。は親要素の左上隅にあります。

子要素を親要素に対して相対的に配置したい場合は、position 属性を使用する必要があります。

位置属性値

# #absolute静的配置以外の最初の親要素を基準にして絶対配置の要素を生成します。 relative通常の位置を基準にして相対的に配置された要素を生成します。

属性値	説明

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

さらに関連記事を読みたい場合は、

PHP 中国語 Web サイト にアクセスしてください。 ！

以上がCSSの子要素を親要素に対して相対的に配置するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。