CSS で位置決めを使用する目的は、ページ上の要素のレイアウトと位置をより正確に制御することです。配置により、要素を通常のドキュメント フローの位置に対してオフセットすることができ、より柔軟なレイアウト効果を実現できます。
ターゲティングには 4 つのカテゴリがあります。
- 静的配置: 静的配置は要素のデフォルトの配置方法であり、最も一般的な配置方法でもあります。要素は通常のドキュメント フローに従ってレイアウトされ、配置プロパティの影響を受けません。を使用して
position: static;設定します。 - 相対配置: 相対配置は、通常のドキュメント フロー位置に対して要素をオフセットしますが、他の要素のレイアウトには影響しません。相対オフセット (上、右、下、左) を指定して要素の位置を調整します。相対的に配置された要素は、元の空間占有状態を維持します。を使用して
position: relative;設定します。 - 絶対配置: 絶対配置では、通常のドキュメント フローから要素を取り出し、最も近い位置にある (静的に配置されていない) 祖先要素を基準にして配置します。位置決めされた祖先要素がない場合、位置決めはドキュメントの最初の包含ブロックを基準に行われます。要素の位置を正確に制御するには、絶対位置決めを使用します。を使用して
position: absolute;設定します。 - 固定配置: 固定配置は、要素が親要素を基準とするのではなく、ビューポートを基準にして配置される特別なタイプの絶対配置です。固定位置要素は、ページがスクロールされても固定位置に留まり、ページがスクロールしても位置が変わりません。を使用して
position: fixed;設定します。
これらの配置方法を使用すると、ページ上の要素の正確なレイアウトと配置が実現され、ページがより創造的でインタラクティブになります。各測位方法には適用可能なシナリオがあり、目的の効果を達成するために、ニーズに応じて適切な測位方法を選択できます。