CSSのpositionプロパティを理解しよう：relative・absolute・fixedの違い

導入

Webページのレイアウトを調整するとき、「要素を少し右に動かしたい」「ヘッダーを固定したい」といったニーズは日常的に発生します。こうした場面で活躍するのが position プロパティです。ただし、relative や absolute といった値の違いが分かりにくいと感じる方も多いでしょう。この記事では、それぞれの特徴を初心者向けにわかりやすく解説し、どのように使い分ければよいかを紹介します。

前提条件

HTMLとCSSの基本構造を理解している。
ブラウザの検証ツールでスタイルの変化を確認できる。

ステップ1：relative（相対位置）

relative は「元の位置を基準に要素を動かす」ための指定です。top や left の値は、通常のフローで配置された位置からの相対的なずれを表します。

.box {
  position: relative;
  top: 10px;
  left: 20px;
}

要素は元の位置に存在したまま、見た目だけが移動する。
ほかの要素のレイアウトへの影響は最小限で、移動後のスペースは元の位置に保持される。

ステップ2：absolute（絶対位置）

absolute は、基準となる親要素の位置をもとに要素を配置します。親要素に position が指定されていない場合、ブラウザはページ全体（<body>）を基準に座標を計算します。

.box {
  position: absolute;
  top: 10px;
  left: 20px;
}

いったん通常のレイアウトフローから取り除かれ、他の要素に重ねて配置できる。
親要素に position: relative; や position: absolute; を設定して基準を明確にすると管理しやすい。

ステップ3：fixed（固定位置）

fixed は、ビューポート（画面全体）を基準に要素を固定する指定です。スクロールしても指定した座標に固定され、常に表示され続けます。

.header {
  position: fixed;
  top: 0;
  width: 100%;
}

ヘッダーやナビゲーションバー、ページの下部に配置するアクションボタンなどで活躍する。
モバイル環境では画面の占有領域が大きくなりがちなため、固定要素の高さや表示タイミングに注意する。

ステップ4：sticky（条件付き固定）

sticky は、通常のレイアウトでスクロールしながら、指定位置に到達したタイミングで固定表示に切り替える挙動を提供します。

.title {
  position: sticky;
  top: 0;
}

長い表の見出しや、セクションタイトルなどをスクロール中に見失わないようにする用途に向いている。
親要素の領域を超えた範囲では固定されない点に注意が必要。

ベストプラクティス

ページ全体に absolute を多用すると保守が難しくなるため、グリッドやフレックスレイアウトと組み合わせて使う。
fixed の活用時はレスポンシブ対応を意識し、モバイルでの表示崩れやボタンの押しづらさを避ける。
sticky は主要ブラウザでサポートされているが、古い環境ではフォールバックを検討する。
z-index を併用して重なり順を制御し、要素が意図せず隠れないようにする。

よくある質問

Q. absolute と fixed の違いは？
A. absolute は親要素を基準に配置され、スクロールに合わせて位置も移動します。一方、fixed は画面全体を基準にし、スクロールしても同じ座標に留まります。

Q. 要素が消えたように見えるのはなぜ？
A. 重なり順（z-index）が影響している場合があります。値を調整して、要素がほかの要素の背面に隠れていないか確認しましょう。

まとめ

position プロパティはレイアウトの自由度を高め、要素を意図した位置に配置するための重要なツールです。relative と absolute の基準の違い、fixed の固定表示、そして sticky の条件付き固定を理解すれば、動きのあるインターフェースを設計できるようになります。まずは relative と absolute の関係性を意識しながら、実際にブラウザの検証ツールで動作を確かめてみましょう。