はじめに
CSSでレイアウトを組むときに欠かせないのが position プロパティ。
中でも absolute、relative、fixed の3つはよく登場しますが、初心者にとっては違いが分かりづらく、混乱しがちです。
この記事では、それぞれの違いや実務での使い分け方、よくあるつまずきポイントを自分用の備忘録としてまとめました。
①それぞれの違いをざっくり一言で！
| 種類 | 一言で言うと |
|---|---|
relative |
元の位置から少しズラす |
absolute |
指定した親要素の左上を起点に配置 |
fixed |
画面（ビューポート）に固定表示される |
②詳しい違いと動作イメージ
relative（相対配置）
- 自分自身の元の位置を基準に、微調整する
- 文書の流れは維持される（レイアウトは崩れない）
.box {
position: relative;
top: 10px;
left: 20px;
}
実務での使用例:
- 疑似要素 ::before / ::afterの基準
- absolute要素の親要素に設定(基準点を作る)
absolute(絶対配置)
- 一番近い relative/absolute/fixedの親要素を基準に配置される
- 文書の流れから外れるため、レイアウトに重なりを作れる
.container {
position: relative;
}
.button {
position: absolute;
top: 10px;
right: 10px;
}
実務での使用例:
- カードの右上のバッジ・アイコン配置
- モーダルウィンドウ・ツールチップ
- ホバーで表示されるメニュー
fixed(固定配置)
- 画面(ビューポート)を基準に配置される
- スクロールしても常に同じ場所に表示
.back-to-top {
position: fixed;
botton: 20px;
right: 20px;
}
実務での使用例:
- 固定ヘッダーやサイドメニュー
- ページトップに戻るボタン
- 通知やフロートバナーの表示
③よくあるつまずきポイント
- absoluteの基準になる要素がrelativeでなければ、想定外の場所に表示される
- fixedはモバイルで画面に収まりきらず、重なりやスクロール問題が出やすい
- relativeはズレるだけなので、「レイアウトが壊れた？」と誤解されがち
④まとめ表
⑤おまけ:実際に試すと分かる!
- Chromeのデベロッパーツールでpositionを切り替えて、挙動を見ると理解が深まります。
- 模写コーディングやパーツ制作を通じて「この配置、どれを使えば？」を体験しながら覚えるのが近道!