CSSのポジショニング関連プロパティ徹底解説｜relative・absolute・fixedの違いと使い分け

CSSにおけるポジショニング（位置指定）関連のプロパティを理解することは、思い通りのレイアウトを実現するための第一歩です。本記事では、代表的な3つの配置方法「相対配置（relative）」「絶対配置（absolute）」「固定配置（fixed）」について、それぞれの特徴と使い方をわかりやすく解説します。

相対配置（position: relative）

相対配置は、HTML要素が本来表示される位置を基準として、そこからどれだけずらすかを指定する方法です。たとえば left: 20px; と指定すると、要素が通常表示される位置から左端に20ピクセル分ずれて表示されます。

元の位置が基準となるため、レイアウト全体に影響を与えにくく、微調整を行いたい場合に便利です。また、後述する絶対配置の基準コンテナとしてもよく使われます。

絶対配置（position: absolute）

position: absolute; を指定した要素は、画面（ブラウザ）の左上隅を基準とした座標で配置されます。ただし、実際には親要素に position: relative; や position: absolute; などが指定されている場合は、その親要素の左上が基準となります。

この性質を利用すると、ボタンの上にバッジを重ねたり、画像の上にテキストを重ねたりといった、要素の重なり表現が自由自在に行えます。ドロップダウンメニューやモーダルウィンドウの実装にも欠かせない配置方法です。

固定配置（position: fixed）

固定配置を使うと、ページをスクロールしても要素が常に同じ場所に留まり続けるようになります。指定した座標はブラウザウィンドウ（ビューポート）を基準とします。

スクロールしても消えないヘッダーナビゲーションや、「ページトップへ戻る」ボタンなど、常に画面内に表示しておきたいUIの実装によく使われる手法です。

補足：position: sticky という選択肢も

近年では、relativeとfixedの中間的な挙動を持つ position: sticky; も広く使われています。通常時は相対配置として振る舞い、スクロールして指定位置に達すると固定されるため、見出しやサイドバーを目立たせる演出に最適です。

まとめ

• relative： 元の位置を基準にずらす。微調整や基準コンテナに便利
• absolute： 親要素または画面の左上を基準に自由に配置。重ね合わせ表現に必須
• fixed： ブラウザウィンドウ基準で固定。スクロールしても動かないUIに最適

それぞれの特性を正しく理解し、目的に応じて使い分けることで、より洗練されたWebデザインを実現できます。