絶対配置と相対配置を分かりやすく解説

CSSにおける位置の指定方法としては、「absolute」と「relative」という2つの方法が一般的であり、ドキュメント内の要素の配置を操作するために利用されます。

相対位置は要素が本来ドキュメントの流れの中で占める位置を基準に位置を指定します。要素のpositionプロパティをrelativeに設定すると、top、right、bottom、leftプロパティを用いて要素の位置を調整できます。これらのプロパティは要素自身を基準にしてオフセットを指定しており、正または負の値を使用してオフセットの方向と距離を指定します。例えば、top: 10pxは要素の上部を下方向に10ピクセルオフセットします。

absolute配置は、最も近い位置指定プロパティ（positionプロパティがrelative、absolute、もしくはfixed）を持つ親要素に対して、位置指定が行われます。親要素に位置指定プロパティが見つからない場合は、通常の包括ブロック（通常はブラウザーウィンドウ）に対して位置指定が行われます。relative配置と同様に、absolute配置でもtop、right、bottom、leftプロパティを使用して要素の位置を調整できますが、これらのプロパティは、親要素に対する位置からのオフセットとして使用されます。例えば、top: 10pxは、要素の上部と親要素の上部の距離が10ピクセルになります。

絶対配置を使うと、要素が通常のドキュメントフローから外れ、本来の領域を占有しなくなります。つまり、本来その要素が占有していた領域を、別の要素が占める可能性があります。この事態を回避するため、相対配置を使用して基準となるコンテナを作成し、その中で絶対配置を使用します。

つまり、relative配置は要素自身を基準に配置し、absolute配置は親要素を基準に配置するということです。これら2つの配置方法をうまく利用することで、複雑なレイアウトを構築できます。