CSSレイアウトを学んでいると必ず出てくるのが position プロパティ。 でも、absolute や relative の違いってなんとなくしか分かってない…という方も多いのでは？
この記事では、各positionの役割と違いを図解・コード付きで解説し、 実務でよく使うケースも交えて理解を深めていきます。
目次
positionとは？
position プロパティは、要素の配置基準や重なり方を指定するためのCSSプロパティです。
代表的な値：
static（初期値）relativeabsolutefixedsticky
それぞれの意味と使い方を見ていきましょう。
static（初期値）
.box {
position: static;
}- デフォルトの状態。特別な指定がなければ全要素これ。
topやleftなどの位置指定は効かない- flow（文書の流れ）に従って並ぶ
実務で明示的に指定することは少ないです。
relative（基準点をずらす）
.relative-box {
position: relative;
top: 10px;
left: 20px;
}- その要素自身を基準に、位置をずらす
- flowの中での位置は保ったまま、見た目だけ動く
よくある使い方
absoluteの基準にしたい親要素に指定する- アイコンやバッジを「少しだけずらして重ねたい」時など
absolute（親要素を基準に配置）
.absolute-box {
position: absolute;
top: 0;
right: 0;
}- 一番近い
position: relativeなどの親要素を基準に配置 - flowから外れる（他の要素が詰めてくる）
ポイント
- 基準となる親が
staticのままだと、<body>を基準にしてしまう - 親要素に
relativeをつけるのを忘れずに！
実務での使用例
- モーダルの閉じるボタン（右上固定）
- バナーや装飾アイコンの重ね合わせ
fixed（画面に固定）
.fixed-box {
position: fixed;
bottom: 20px;
right: 20px;
}- 常に画面の同じ位置に表示される
- スクロールしても動かない
- 基準はビューポート（画面）
よくある使用例
- ページ最下部にある「ページトップへ戻る」ボタン
- スマホの固定メニュー
sticky（条件付き固定）
.sticky-box {
position: sticky;
top: 0;
}- スクロールして所定の位置に来たら固定される（そこまでは普通に流れる）
- スクロールに反応するナビゲーションバーなどで便利
注意点
- 親要素に
overflow: hiddenがあると効かない - 動作にややクセがあるので検証しながら使うのが◎
positionとz-indexの関係
z-index は「重なり順」を指定するプロパティですが、position が指定されていないと効きません。
.box {
position: relative; /* staticだとz-index効かない */
z-index: 10;
}positionがrelative/absolute/fixed/stickyのときに有効
よくあるエラーと対処法
| 問題 | 原因と対処法 |
|---|---|
absolute が意図した場所に出ない | 親要素が relative になっていない → 明示的に指定する |
z-index が効かない | position が static のまま → relative などを指定する |
sticky が効かない | 親要素に overflow: hidden がある → 見直す |
まとめ：positionの違いを使い分けて思い通りのレイアウトに！
relative：その場で少しズラす、absoluteの親要素にも使うabsolute：重ねる・右上固定など、細かい位置指定に最適fixed：画面にピタッと貼りつける、常時表示UIにsticky：スクロール連動で固定する、ヘッダーなどに便利
positionを理解することで、CSSレイアウトの自由度がグッと広がります！
コメント