CSS での相対位置と絶対位置: それぞれをいつ使用する必要がありますか?

CSS における位置: 相対と位置: 絶対の違いを理解する

Web サイトのレイアウトをデザインする場合、CSS の位​​置プロパティは重要な役割を果たします。要素の配置を制御します。よく使用される 2 つのプロパティは、position:相対と位置:絶対です。それらの違いを詳しく調べて、それぞれをいつ採用する必要があるかを判断してみましょう。

絶対配置 (position:Absolute)

position:Absolute を「フロー外」オプションとして検討します。 。絶対的に配置された要素は通常のドキュメント フローから削除され、top、right、bottom、left プロパティを使用して正確に配置されます。これらは周囲の要素の影響を受けず、親要素の境界ボックス (親が配置されていない場合はビューポート) を基準にして配置されます。

例:

position: absolute;
top: 10px;
left: 20px;

この要素は、ビューポートの上から 10 ピクセル、左から 20 ピクセルの位置に配置されるか、その位置がオーバーライドされます。 parent.

相対配置 (position:relative)

対照的に、position:relative では、要素をデフォルトの位置からオフセットしながらドキュメント フロー内に残すことができます。相対位置の top、right、bottom、left プロパティは、オフセットが適用される前の要素の初期位置を参照します。

例:

position: relative;
left: 3em;

ここでは、要素は、通常のフロー内での位置を維持しながら、元の位置から 3em 左にシフトします。 document.

使用ガイドライン

次の場合に位置: 絶対を使用します。

• 正確で静的な位置決めが必要な場合、周囲の要素から独立しています。
• 重複する要素が必要な場合、またはレイヤーを作成したい場合エフェクト。

次の場合に位置:相対を使用します。

• 通常のコンテキスト内で要素をオフセットしたい場合。
• 要素が周囲のコンテンツの変更に応答することを好みます。
• 要素のデフォルトのサイズと動作を維持したい場合

これらのプロパティとその適切な使用法を理解すると、柔軟で視覚的に魅力的な Web ページ レイアウトを作成する能力が高まります。

以上がCSS での相対位置と絶対位置: それぞれをいつ使用する必要がありますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。