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; }いつ使う？
カードの右上に「NEW」バッジを置く → absolute。要素を少しだけずらしたい → relative。absoluteの基準を作る → 親にrelative。
間違いやすいポイント
❌ absoluteの親にrelativeを付け忘れる
親にpositionが指定されていないと、absoluteの基準がbody（画面全体）になり、意図しない場所に飛びます。
よくある疑問
Q: absoluteを使うとき、親に何が必要？
A: 親要素にposition: relativeを指定します。これがないとページ全体が基準になります。
Q: relativeだけ指定して何も動かさないのはなぜ？
A: 子要素のabsoluteの基準点にするためです。よく使うテクニックです。
関連用語
📖 関連レッスン
レッスンを見る →