「position」って何なの…？
CSSを学習し始めて躓くポイントの一つがpositionではないでしょうか？
私も学習し始めたばかりの頃は
「static？relative？absolute？何がどう違うの？」
頭で覚えようとしても混乱してばかり。
この記事では、positionの各値を図解風に説明しながら、「なるほど！」となれるようまとめました。
position: static（デフォルト、何もしない）
意味：すべての要素がこの状態。ブラウザの通常の流れに従って並びます。
特徴
- 特に指定しなければこれになる
topやleftなどの位置指定が効かない
position: relative（元の位置を基準に移動）
意味：今いる元の位置を基準に、指定された方向に動かす。
例えば以下のようなスタイルを黄色のボックスに当てると図のようになります。
.box3 {
position: relative;
top: 50px;
left: 50px;
}
特徴
- 元の場所を“記憶”している
- 他の要素には影響しない
position: absolute（一気に自由！でもルールあり）
意味：親要素の“基準”に従って、好きな位置に配置される。
.parent {
position: relative;
}
.child {
position: absolute;
top: 50px;
left: 50px;
}特徴
- 一番近い
position: relativeを持つ親を基準に動く - 他の要素を無視して、空中に浮く感じ
※ 親にrelativeがないと、<body>全体が基準になるので注意！
position: fixed（常に画面にピタッ）
意味：スクロールしても画面の同じ場所に固定される。
特徴
- 常に画面に表示（スクロールしても動かない）
- よくあるのはヘッダーやページトップボタン
See the Pen fixed by 尾崎幸喜 (@qnzxwuvx-the-lessful) on CodePen.
おわりに
positionって文だけで読むとややこしいけど、図でイメージしたら一気に整理できました。
- どこを「基準」にして動くのか？
- スクロールの影響を受けるのか？
この2点を意識すれば、positionは怖くない！
コメント