ホームページ > 記事 > ウェブフロントエンド > 絶対配置要素と相対配置要素の違いと関連性
絶対配置要素と相対配置要素の違いと関連性
- WBOYオリジナル
- 2024-01-23 10:12:06829ブラウズ
- 絶対配置要素はドキュメント フローから切り離され、スペースを占有しません: 絶対配置要素は他の要素に影響を与えません。他の要素の位置に影響を与えることなく、通常のドキュメント フローを切り離します。したがって、絶対配置要素は、他の要素の制限を受けることなく、ページ上のどこにでも自由に配置できます。
- top、left、right、bottom 属性を使用して位置を制御する: 絶対配置要素は、top、left、right、bottom 属性の値を設定することによって、ページ上の特定の位置を決定できます。これらのプロパティ値は、ピクセル値、パーセンテージ、または負の値にすることもできます。
- 最も近い非静的に配置された要素のスコープ内でのみ配置します。絶対配置された要素の最終的な配置位置は、最も近い非静的に配置された (デフォルトでは配置されなかった) 祖先要素を基準とします。一致する非静的に配置された要素が見つからない場合は、絶対配置された要素がドキュメントに基づいて配置されます。
- 絶対配置された要素は他の要素をカバーできます: 絶対配置された要素はドキュメント フローから切り離されるため、通常の要素をカバーしてカバー効果を実現できます。
- #絶対配置要素の一般的なアプリケーション シナリオは、フローティング メニュー、ポップアップ ボックス、または特別な装飾効果を作成することです。
以下は、絶対配置要素のサンプル コードです。
<!DOCTYPE html>
<html>
<head>
<style>
#box {
position: absolute;
top: 100px;
left: 200px;
width: 200px;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<div id="box"></div><!-- 绝对定位元素 -->
<p>这是一个普通的段落</p>
</body>
</html>上の例では、box は絶対配置要素であり、top を設定することでページの先頭から配置されます。および left 属性。ページの左側から 100px、200px。
2. 相対的に配置された要素の特性と使用法
相対的に配置された要素は引き続きスペースを占有します: 相対的に配置された要素は引き続きページ上のスペースを占有し、ドキュメント フローから切り離されません。他の要素は相対配置された要素の元の位置に合わせて配置され、相対配置された要素が移動してもレイアウトには影響しません。- top、left、right、bottom 属性を使用して微調整する:top、left、right、bottom 属性の値を設定することで、相対的に配置された要素を微調整することもできます。これらのプロパティ値は、ドキュメント内の要素の元の位置を基準にして計算されます。
- それ自体と子要素に適用: 相対位置プロパティは、それ自体とそれに含まれる子要素の両方に適用されます。子要素は、相対的に配置された要素の位置を参照して配置できます。
- 相対的に配置された要素は、通常、要素の位置を微調整して、特定のシナリオでより柔軟なレイアウトを実現するために使用されます。
次は相対配置要素のサンプル コードです:
<!DOCTYPE html>
<html>
<head>
<style>
#box {
position: relative;
top: 20px;
left: 50px;
width: 200px;
height: 200px;
background-color: blue;
}
</style>
</head>
<body>
<div id="box"><!-- 相对定位元素 -->
<p>这是一个相对定位元素内的段落</p>
</div>
</body>
</html>上の例では、box が相対配置要素です。top 属性と left 属性を設定することで、次の要素に基づいて配置されます。元の位置。下に 20 ピクセル、右に 50 ピクセル移動しました。段落要素もボックスを基準にして配置されます。
3. 絶対位置決め要素と相対位置決め要素の関係
相対位置決めは絶対位置決めの基礎です: 相対位置決めは絶対位置決めの特殊な形式です。要素の絶対位置を設定する前に、通常はまず相対位置に設定し、次に特定の位置に top や left などの属性を使用します。- 絶対位置の要素と相対位置の要素は同時に存在できます:絶対位置の要素と相対位置の要素は同じページ上に同時に存在できます。それらの間のレイアウトは互いに干渉せず、ページ上に自由に配置できます。
- z-index 属性を使用して要素の重なり順を制御できます。z-index 属性の値を設定することで、絶対的に配置された要素と相対的に配置された要素の重なり順を制御でき、これにより次のことを実現できます。さまざまな要素のオクルージョン効果。
- 以下は、絶対位置の要素と相対位置の要素が共存するサンプル コードです。
<!DOCTYPE html>
<html>
<head>
<style>
#box1 {
position: relative;
top: 20px;
left: 50px;
width: 200px;
height: 200px;
background-color: blue;
}
#box2 {
position: absolute;
top: 0;
right: 0;
width: 100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<div id="box1"><!-- 相对定位元素 -->
<div id="box2"></div><!-- 绝对定位元素 -->
</div>
</body>
</html>上の例では、box1 は、top を設定することで、相対位置の要素になります。 [プロパティ] をクリックして、下に 20 ピクセル、右に 50 ピクセル移動します。 box2 は絶対配置要素で、top 属性と right 属性を設定することで box1 の右上隅に配置されます。
実際のコード例を通じて、絶対配置要素と相対配置要素の違いと接続をより明確に理解できます。これら 2 つの配置方法の特性と使用法をマスターすることで、Web ページをより柔軟にレイアウトおよびデザインして、より優れた視覚効果を実現できます。
以上が絶対配置要素と相対配置要素の違いと関連性の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。