CSS
absolute・relative の違い
初級読み方：アブソリュート・レラティブ のちがい｜英語：absolute vs relative
relativeは元の位置を基準にずらす配置。absoluteは親要素を基準に自由に配置する。
やさしい説明
relativeは元の位置を基準にずらします。absoluteは親要素（positionが指定された）を基準に自由に配置します。
relative は「自分の席から少しずれる」イメージ。元の席は残ったまま、見た目だけずれます。absolute は「教室のどこにでも移動できる」イメージ。元の席は消えます。
absoluteを使うときは親にrelativeを付けるのがセットです。これを忘れると画面全体が基準になってしまいます。
具体例・使い方
/* relative: 元の位置から10px下にずれる */
.box { position: relative; top: 10px; }
/* absolute: 親の左上に配置 */
.parent { position: relative; } /* ← 必須！ */
.badge { position: absolute; top: 0; right: 0; }positionの全5種類
- static（デフォルト）— 通常のレイアウト。top/left などは効かない
- relative — 元の位置を基準にずらす。元のスペースはそのまま残る
- absolute — positionが指定された直近の親を基準に配置。通常のレイアウトから外れる
- fixed — ブラウザのビューポート（画面）を基準に固定。スクロールしても動かない
- sticky — スクロールで一定位置に達すると固定になる。ナビバーの追従に使う
よく使うパターン
/* ① カードの右上に「NEW」バッジを置く */
.card {
position: relative; /* 基準を作る */
}
.badge {
position: absolute;
top: 8px;
right: 8px;
background: red;
color: white;
}
/* ② ヘッダーをスクロールしても追従させる */
.header {
position: sticky;
top: 0;
z-index: 100;
}
/* ③ モーダルを画面中央に表示する */
.overlay {
position: fixed;
inset: 0; /* top/right/bottom/left を一括で 0 に */
background: rgba(0,0,0,0.5);
}
.modal {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%); /* 中央に調整 */
}間違いやすいポイント
❌ absoluteの親にrelativeを付け忘れる
親にpositionが指定されていないと、absoluteの基準がbody（画面全体）になり、意図しない場所に飛びます。absoluteを使うときは必ず親要素に position: relative を付けるセットで覚えましょう。
❌ absoluteやfixedにしたら幅が0になった
通常フローから外れた要素は自動で幅が縮まります。width を明示するか、left: 0; right: 0 のように両端を指定して幅を確保しましょう。
よくある疑問
Q: absoluteを使うとき、親に何が必要？
A: 親要素にposition: relativeを指定します。これがないとページ全体が基準になります。
Q: relativeだけ指定して何も動かさないのはなぜ？
A: 子要素のabsoluteの基準点にするためです。よく使うテクニックです。
関連用語
📖 関連レッスン
レッスンを見る →