CSSのpositionプロパティ完全ガイド：relative・absolute・fixed・stickyの違いを理解する

CSSのpositionプロパティは、要素の「配置方法」を制御するための重要なプロパティです。
Webデザインで要素を特定の位置に固定したり、スクロールに追従させたりする際に欠かせません。
本記事では、relative・absolute・fixed・stickyの4つの主要な値の違いを、具体例を交えて解説します。

1 実装のポイント

まずは基本のHTML構造を用意します。
親要素と子要素を定義し、どのように位置が変わるのか確認できるようにします。

- relative：元の位置を基準に少し動かす（レイアウトを保ったまま）
- absolute：親要素（position:relative）を基準に絶対配置
- fixed：画面全体に対して固定（スクロールしても動かない）
- sticky：スクロール中に指定位置で止まる（ハイブリッド動作）

positionはレイアウト制御の基礎であり、他のCSSプロパティ（z-index・transformなど）と併用するとより柔軟なデザインが可能です。

<div class="css-position-property-parent">
  <div class="child relative">relative</div>
  <div class="child absolute">absolute</div>
  <div class="child fixed">fixed</div>
  <div class="child sticky">sticky</div>
</div>
    

2 汎用CSS

以下のCSSでは、各positionの違いを確認しやすいように背景色や位置を指定しています。

/* ----------------------------------
 * CSSのpositionプロパティ完全ガイド
 * --------------------------------- */

.css-position-property-parent { /* 親コンテナ */
  position: relative; /* relativeを指定すると、子のabsolute要素の基準になる */
  width: 100%; /* 全幅を確保 */
  height: 600px; /* 高さを確保してsticky動作を確認できるように */
  background: #f5f5f5; /* 背景を薄いグレーに */
  overflow: auto; /* スクロールを許可 */
  padding: 20px; /* 内側余白 */
}

.css-position-property-parent .child { /* 子要素の共通スタイル */
  width: 120px; /* 固定幅 */
  height: 80px; /* 固定高さ */
  line-height: 80px; /* テキストを縦中央に揃える */
  color: #fff; /* 文字色を白に */
  text-align: center; /* テキストを中央揃え */
  border-radius: 8px; /* 角丸にする */
  margin: 10px; /* 各要素の間に余白 */
  font-weight: bold; /* 太字 */
}

/* relative */
.css-position-property-parent .relative {
  position: relative; /* 自身を通常の位置から相対的に移動できる */
  top: 20px; /* 上から20px下げる */
  left: 30px; /* 左から30px右へ移動 */
  background: #0073aa; /* WordPressブルー */
}

/* absolute */
.css-position-property-parent .absolute {
  position: absolute; /* 親（relative）の位置を基準に絶対配置 */
  top: 50px; /* 上から50pxの位置に固定 */
  right: 40px; /* 右から40pxの位置に固定 */
  background: #e91e63; /* ピンク系背景 */
}

/* fixed */
.css-position-property-parent .fixed {
  position: fixed; /* 画面全体に対して固定配置（スクロールしても動かない） */
  bottom: 20px; /* 画面下から20px上に固定 */
  right: 20px; /* 画面右から20px左に固定 */
  background: #4caf50; /* グリーン系背景 */
  z-index: 1000; /* 他要素より上に表示 */
}

/* sticky */
.css-position-property-parent .sticky {
  position: sticky; /* スクロール時に特定位置で固定される */
  top: 0; /* スクロールで上端に達したら固定 */
  background: #ff9800; /* オレンジ背景 */
}
    

3 完成イメージ

4 まとめ

- relative：元の位置を基準に少し動かす（レイアウトを保ったまま）
- absolute：親要素（position:relative）を基準に絶対配置
- fixed：画面全体に対して固定（スクロールしても動かない）
- sticky：スクロール中に指定位置で止まる（ハイブリッド動作）
各positionの違いを理解すると、ヘッダー固定・バナー配置・レイアウト調整などあらゆる場面で応用できます。