CSS
positionプロパティを簡単に理解する方法！
positionプロパティを簡単に理解する方法！CSS配置のキホンをやさしく解説
もくじ
この記事でわかること
- positionとは何か？役割は？
- static / relative / absolute / fixed / sticky の違い
- 初心者がつまずかないための覚え方
- 実際のコードと一緒に学ぼう！
そもそも「position」って何？
CSSのpositionプロパティは、
「この要素をどのルールでどこに配置するか」を決めるもの
基本の種類は5つ！
| 値 | 意味 |
|---|---|
| static | 初期状態（特に指定がない） |
| relative | 自分の元の位置を基準にずらす |
| absolute | 一番近いposition持ちの親を基準に配置 |
| fixed | 画面（ブラウザ）を基準に固定 |
| sticky | スクロールに応じて固定される |
| static | 初期状態（特に指定がない） |
|---|---|
| relative | 自分の元の位置を基準にずらす |
| absolute | 一番近いposition持ちの親を基準に配置 |
| fixed | 画面（ブラウザ）を基準に固定 |
| sticky | スクロールに応じて固定される |
static（スタティック）＝ デフォルト状態
.box {
position: static;
}
- 特に位置をずらしたりはしない
- 全要素がこの状態からスタートする
覚え方：「何もしない」が基本
relative（レラティブ）＝ 自分の位置からズラす
.box {
position: relative;
top: 10px;
left: 20px;
}
- 元の位置はそのまま確保
- 見た目だけちょっと動く
覚え方：「その場からちょっと移動」
absolute（アブソリュート）＝ 親を基準にピタッと配置
.parent {
position: relative;
}
.child {
position: absolute;
top: 0;
right: 0;
}
- 一番近い「positionが指定された親」を基準に配置される
- 元の位置のスペースはなくなる
覚え方：「親の中で自由に動ける」
fixed（フィックスド）＝ 画面に固定
.box {
position: fixed;
bottom: 10px;
right: 10px;
}
- 画面（ブラウザ）に対して固定される
- スクロールしても動かない
覚え方：「常にそこにいる！ページに張り付く！」
sticky（スティッキー）＝ スクロール途中で固定
.box {
position: sticky;
top: 0;
}
- 指定位置までは普通にスクロール
- ある地点に来たら、そこでピタッと止まる（固定）
覚え方：「最初は普通、途中から止まる」
よくある質問
Q. absoluteがずれるのはなぜ？
→ 親にposition: relative;が付いていないと、画面全体を基準にして配置されてしまうから！
Q. stickyが効かない！
→ 親要素にoverflow: hidden;や高さがないと効かないことがある！
まとめ：どれを使えばいいの？
| やりたいこと | 使うposition |
|---|---|
| 通常の配置だけでOK | static（初期） |
| 少しだけ見た目をずらしたい | relative |
| 親の中で自由に配置したい | absolute |
| 画面に固定したい（ヘッダーなど） | fixed |
| スクロール途中で止めたい | sticky |
最後にひとこと
positionは「とにかく使ってみる」のが理解の近道！
要素を動かしてみて、どのプロパティがどんな動きをするか体験しながら覚えていくのが一番です。
「画面に固定したい」「特定の親の中で動かしたい」
そう思ったとき、この記事が参考になったらうれしいです
