CSS positionの使い方【absolute/relative/fixed/sticky】

positionプロパティとは？

positionは、要素の配置方法を指定するCSSプロパティです。通常の文書の流れから要素を取り出して、好きな位置に配置できます。固定ヘッダー、ポップアップ、バッジなど、さまざまな場面で使います。

positionを使わない場合、HTML要素は上から順に並びます。これを「通常フロー」と呼びます。positionを指定すると、この通常フローから要素を取り出して自由に配置できます。

positionを指定した要素には、top、right、bottom、leftの4つのプロパティで位置を指定します。これらは「基準点からの距離」を表します。基準点はpositionの値によって変わります。

displayプロパティとの違いも押さえておきましょう。displayは「要素の表示形式」を決めます。positionは「要素の配置方法」を決めます。両方を組み合わせて使うことが多いです。displayプロパティの詳細はdisplayプロパティ入門で解説しています。

5つの値を理解する

static（初期値・通常の流れ）

すべての要素のデフォルト値です。上から順に配置されます。top/left などの指定は効きません。

relative（自分の位置を基準にずらす）

元の位置を基準に、top/left でずらせます。元の場所のスペースは残ったままです。

.box {
  position: relative;
  top: 10px;   /* 元の位置から下に10px */
  left: 20px;  /* 元の位置から右に20px */
}

absolute（親要素を基準に配置）

文書の流れから完全に外れ、最も近い position: relative（またはabsolute/fixed）の親要素を基準に配置されます。

.badge {
  position: absolute;
  top: -8px;
  right: -8px;
}

fixed（画面に固定）

ブラウザのウィンドウ（ビューポート）を基準に固定されます。スクロールしても動きません。

header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
}

sticky（スクロールで固定）

通常はrelativeのように振る舞い、スクロールして指定位置に達するとfixedのように固定されます。

.sidebar {
  position: sticky;
  top: 20px; /* 上から20pxの位置で固定 */
}

💡 CSS入門ガイドでCSSの基本を確認できます。

absolute + relative の組み合わせ

親にrelative、子にabsoluteのパターン

absoluteの基準となる親要素に position: relative を指定するのが定番パターンです。

コード例（バッジの配置）

/* 親要素 */
.card {
  position: relative; /* absoluteの基準になる */
  padding: 20px;
}

/* 子要素（バッジ） */
.card .badge {
  position: absolute;
  top: -8px;
  right: -8px;
  background: red;
  color: white;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
}

📖 displayプロパティでflex/gridとの組み合わせを学べます。

実践例

固定ヘッダー（fixed）

header {
  position: fixed;
  top: 0;
  width: 100%;
  background: white;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  z-index: 100;
}

/* ヘッダー分の余白を確保 */
body { padding-top: 60px; }

「トップに戻る」ボタン（fixed）

.back-to-top {
  position: fixed;
  bottom: 20px;
  right: 20px;
}

カード上のラベル（absolute）

.card { position: relative; }

.card .label {
  position: absolute;
  top: 12px;
  left: 12px;
  background: #0d9488;
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
}

🔗 Flexbox入門でレイアウトの基本を学べます。

よくある間違い

• absoluteの親にrelativeを忘れる：親にrelativeがないと、absoluteはページ全体を基準に配置されてしまいます。
• z-indexの重なり順：要素が重なったとき、z-index の値が大きい方が前面に表示されます。positionがstatic以外のときだけ有効です。
• 固定ヘッダーでpadding-topを忘れる：fixedは通常フローから外れるため、後続のコンテンツがヘッダーの下に隠れます。ヘッダーの高さ分だけbodyにpadding-topを設定しましょう。
• stickyが効かない：親要素に overflow: hidden が指定されていると動きません。また、親要素に高さが設定されていないと固定される範囲がなく効果がありません。
• absoluteで要素が消えたように見える：absoluteは通常フローから外れるため、親要素の高さが0になることがあります。親要素に明示的な高さを設定するか、他の子要素で高さを確保しましょう。

📖 marginとpaddingで余白の基本も確認しましょう。Flexboxとの組み合わせはFlexbox入門を、最初の一歩は最初のCSSを参考にしてください。

まとめ

最初のCSSで基礎を固めてからpositionに挑戦しましょう。