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の基本を確認できます。

5つの値の使い分けを整理しましょう。

staticは何も指定しないときのデフォルトです。ほとんどの要素はstaticのままで問題ありません。

relativeは2つの用途があります。1つ目は要素を少しだけずらしたいとき。2つ目はabsoluteの基準として使うときです。2つ目の用途の方が圧倒的に多いです。

absoluteは親要素の中で自由に配置したいときに使います。通知バッジ、ラベル、オーバーレイなどに使います。必ず親要素にrelativeを指定しましょう。

fixedはページ全体で常に表示したい要素に使います。固定ヘッダー、フッター、チャットボタンなどです。スクロールしても動かないのが特徴です。

stickyはスクロールに応じて固定したいときに使います。サイドバーの目次や、テーブルのヘッダー行に便利です。親要素の範囲内でのみ固定されます。

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以外のときだけ有効です。

📖 marginとpaddingで余白の基本も確認しましょう。

3つ目のよくある間違いは、fixedを使ったときにbodyのpadding-topを忘れることです。固定ヘッダーは通常フローから外れるため、後続のコンテンツがヘッダーの下に隠れます。ヘッダーの高さ分だけbodyにpadding-topを設定しましょう。

4つ目は、stickyが効かないケースです。stickyは親要素にoverflow: hiddenが指定されていると動きません。また、親要素に高さが設定されていないと固定される範囲がないため効果がありません。stickyが効かないときは親要素のoverflowとheightを確認しましょう。

5つ目は、absoluteで要素が消えたように見えるケースです。absoluteは通常フローから外れるため、親要素の高さが0になることがあります。親要素に明示的な高さを設定するか、他の子要素で高さを確保しましょう。

Flexboxとの組み合わせはFlexbox入門を参考にしてください。最初の一歩は最初のCSSで学べます。

positionは最初は難しく感じますが、パターンを覚えれば簡単です。「親にrelative、子にabsolute」のパターンだけでも覚えておけば、バッジやラベルの配置で困ることはありません。実際のWebサイトを見て「この要素はどのpositionを使っているか」を開発者ツールで確認する練習をすると、理解が深まります。

まとめ

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