ホームページ > 記事 > ウェブフロントエンド > 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 属性を使用する必要があります。
位置属性値
属性値 | 説明 |
---|---|
静的配置以外の最初の親要素を基準にして絶対配置の要素を生成します。 | |
通常の位置を基準にして相対的に配置された要素を生成します。 |
PHP 中国語 Web サイト にアクセスしてください。 !
以上がCSSの子要素を親要素に対して相対的に配置するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。