CSSのpositionを図解：static・relative・absolute・fixed・stickyの違いと実例

position は「どこを基準に置くか」と「通常の並び順に場所を残すか」を決めます。5つの値を同じA・対象・Cの箱で比較し、スクロール前後の違いも確認しましょう。

まず5つの値を比較する

基準と元の場所で見分ける

• static：通常の流れに従う。元の場所を使い、top や left では移動しない。
• relative：本来の位置からずらす。元の場所が残るので、後続の要素は詰まらない。
• absolute：包含ブロックを基準に置く。通常フローから外れ、元の場所は残らない。
• fixed：原則としてビューポートを基準に固定する。通常フローから外れ、元の場所は残らない。
• sticky：通常の場所を確保したまま、スクロールに応じて指定位置に留まる。包含ブロックの範囲を超えて追従しない。

図の黄緑色が対象の箱、灰色が前後の箱、破線が移動前の場所です。図は配置の関係を示す模式図で、実際のピクセル寸法はサンプルで確認できます。

その場で切り替えて確かめる

5種類のpositionを切り替える比較サンプルを開く

サンプルは同じHTMLに対して値だけを切り替えます。「260pxまでスクロール」で追従の有無を比べ、「親の終端までスクロール」で sticky と fixed の違いを確かめてください。サンプル枠は独立したページ（iframe）なので、fixed の基準はその枠の表示領域です。

static：通常の順序で配置する

表示はどうなるか

A、対象、Cの順で縦に並びます。top: 24px を書いても対象は動きません。通常の文章やカードは、まず通常フローで配置する方が内容量の変化へ対応しやすくなります。

.target {
  position: static;
  top: 24px; /* staticのため、この移動指定は効かない */
  left: 32px;
}

初期値と継承

• 初期値：static。
• 通常の継承：しない。

親を relative にしても子が自動的に relative になるわけではありません。なお、z-index の扱いにはFlex・Gridアイテムの例外があるため、「staticならどんな場合もz-indexが無効」とは覚えないでください。

relative：元の場所を残して見た目をずらす

後続の箱は詰まらない

対象を右下へ動かしても、Cの配置は対象が移動する前を基準に決まります。大きくずらすと他の箱に重なる可能性があります。少しだけ位置を調整したい場合や、絶対配置する子の基準を作る場合に使います。

.target {
  position: relative;
  top: 24px;
  left: 32px;
}

移動しないrelativeも役に立つ

position: relative だけで、top などを指定しなければ見た目は移動しません。それでも、その要素は absolute の子にとって配置基準になれます。カード右上のバッジなどでよく使う組み合わせです。

absolute：基準の箱の中へ重ねて配置する

元の領域がなくなる

対象が通常フローから外れるため、Aの次にCが並びます。対象だけを重ねられる反面、親の高さは絶対配置した子だけでは確保されません。対象の分だけ余白が必要なら、親側の padding などで設計します。

.card {
  position: relative;
  padding: 3rem 1rem 1rem;
}
.badge {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
}

どの親が基準になるか

基本例では、最も近い position が static 以外の祖先が包含ブロックを作ります。そのような祖先がなければ初期包含ブロックが基準です。ただし、祖先の transform・contain なども包含ブロックを作る場合があります。「必ず直近の親」とは限りません。開発者ツールで祖先のCSSまで確認してください。

fixed：画面の同じ位置へ固定する

スクロールしても位置が変わらない

ページをスクロールしても、対象は画面の指定位置に残ります。上へ戻るボタンなどに使えます。通常フローに場所を残さないため、固定ヘッダーやフッターが本文を隠さないよう、本文側の余白と小さい画面での表示を確認します。

.back-to-top {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
}

画面が基準にならない例外

祖先に transform: translateZ(0) など、固定配置の包含ブロックを作る指定があると、その祖先が基準になる場合があります。fixed が親と一緒に動く場合は、transform・filter・contain なども調べます。比較サンプルにはそのような祖先を置かず、枠のビューポートへの固定を観察できるようにしています。

sticky：指定位置に来たら留まり、親の終端では離れる

スクロール前後を比べる

最初は通常の場所にあり、上方向へスクロールして top の位置に達すると留まります。親の終端が近づくと、親の領域からはみ出さないように押し上げられます。記事横の目次や、一覧内の見出しに向いています。

.scroll-area {
  height: 20rem;
  overflow: auto;
}
.section-heading {
  position: sticky;
  top: 0;
  z-index: 1;
  background: white;
}

stickyが効かないとき

• 縦方向で留めるなら、top または bottom が auto 以外になっているか確認する。
• 親が短く、対象が移動できる余地がなくなっていないか確認する。
• 祖先の overflow: auto・scroll・hidden などにより、想定と違うスクロールの基準ができていないか確認する。
• Flex・Grid内では、対象が引き伸ばされて親と同じ高さになっていないか確認する。必要に応じて align-self: start などを検討する。

sticky は、スクロール機構を持つ最も近い祖先との関係と、包含ブロックの制約の両方で決まります。単に「ある位置からfixedに切り替わる」と理解すると、親の終端や overflow でつまずきます。

手元で試せる共通HTMLとCSS

index.htmlを用意する

次のHTMLを index.html に保存し、同じフォルダーへ styles.css を作ります。ページを開き、CSS内の position だけを順に変えてください。固定配置の例は画面上端に重なるので、学習用のページで試します。

<!doctype html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>positionの比較</title>
  <link rel="stylesheet" href="./styles.css">
</head>
<body>
  <p>下へスクロールして比較します。</p>
  <main class="parent">
    <div class="box">A</div>
    <div class="box target">対象</div>
    <div class="box">C</div>
  </main>
  <footer>親の終端を越えた領域</footer>
</body>
</html>

styles.cssの値を切り替える

* { box-sizing: border-box; }
body { margin: 0; font: 16px/1.8 sans-serif; }
.parent {
  position: relative;
  min-height: 650px;
  margin: 24px;
  padding: 16px;
  border: 2px dashed #45614e;
}
.box {
  width: 150px;
  height: 60px;
  margin-bottom: 12px;
  padding: 12px;
  background: #edf1e9;
  border: 1px solid #45614e;
}
.target {
  position: relative; /* static / absolute / fixed / stickyに変更 */
  top: 24px;
  left: 32px;
  z-index: 1;
  background: #d2f777;
}
footer { min-height: 500px; padding: 24px; }

図と同じく、対象を動かしたときにCがどこへ来るかを先に観察します。次にスクロールして、対象が親について動くか、画面に留まるか、親の終端で離れるかを確認しましょう。

positionが効かないときの確認

表示方式と位置指定を分けて考える

position は横並びを作るための第一候補ではありません。カードを横に並べるなら display: flex や display: grid を使い、その上に重ねるバッジだけを absolute にすると、文字量の変化にも対応しやすくなります。

重なり順と操作性を確認する

z-index の数字を大きくしても、別の重ね合わせコンテキストを自由に越えられるわけではありません。fixed と sticky は重ね合わせコンテキストを作ります。文字の拡大時に内容が隠れないか、キーボードで移動したフォーカスが固定要素に隠れないかも確かめてください。

positionのブラウザー互換性

プロパティ本体の対応

2026年9月21日確認のMDN Browser Compatibility Dataの記録です。開始版は通常の接頭辞なしの実装を優先しています。プロパティが使えることと、すべての値・構文が使えることは別です。

• Chrome：1以降
• Edge：12以降
• Firefox：1以降
• Safari：1以降
• Android版Chrome：18以降
• iOS版Safari：1以降

「部分対応」「補足条件あり」の場合は下の出典の注記も確認します。開発版・予定版の記録は、その機能が現在の安定版で使えるという意味ではありません。

値・利用場面による追加の対応差

• relative：Chrome 1以降 ／ Edge 12以降 ／ Firefox 1以降 ／ Safari 1以降。
• static：Chrome 1以降 ／ Edge 12以降 ／ Firefox 1以降 ／ Safari 1以降。

これらは互換性データ上の機能名です。対応する値・文脈の詳細や、ここに挙げていない新しい機能はMDNの個別ページを参照してください。

関連する記事と参考資料

関連する記事

• visibility の使い方
• top の使い方
• display の使い方
• right の使い方
• bottom の使い方
• CSSプロパティ一覧
• CSSセレクターと条件指定
• HTML・CSSの学習順

参考資料

• MDN：position
• CSS仕様の定義
• 互換性データの出典
• 初期値・継承情報の出典

互換性はMDN Browser Compatibility Data 8.1.2、初期値と継承はmdn-data 2.36.0（いずれもCC0-1.0）を参照しています。ブラウザー更新時には対象の値まで含めて再確認してください。