position
中級読み方：ポジション｜英語：Position
要素の配置方法を指定するプロパティで、static, relative, absolute, fixed, sticky があるよ。いつ使う？ ヘッダーを画面上部に固定したい(fixed)、親要素の中で自由に配置したい(absolute)、スクロールで途中から固定したい(sticky)ときに使うよ。間違いやすいポイント: absoluteの基準は「最も近いposition: static以外の親要素」だよ。親にposition: relative;を忘れると、ページ全体が基準になってしまうよ。
やさしい説明
positionは、要素の配置方法を指定するプロパティです。デフォルトは static（通常の流れ）ですが、変更すると要素を自由に動かせます。
relative は元の位置を基準にずらします。absolute は親要素を基準に自由配置。fixed は画面に固定（スクロールしても動かない）。sticky はスクロールに追従して途中で固定されます。
absolute を使うときは、親要素に position: relative を指定するのがセットです。これを忘れると画面全体が基準になってしまいます。
図解：positionの種類
具体例・使い方
/* 固定ヘッダー */
.header { position: fixed; top: 0; width: 100%; z-index: 100; }
/* 親を基準にバッジを配置 */
.card { position: relative; }
.badge { position: absolute; top: -8px; right: -8px; }
/* スクロール追従 */
.sidebar { position: sticky; top: 80px; }いつ使う？
固定ヘッダー（fixed）、カードの右上にバッジを置く（absolute）、サイドバーをスクロール追従させる（sticky）ときに使います。
間違いやすいポイント
❌ absoluteの親にrelativeを付け忘れる
親にpositionが指定されていないと、absoluteの基準がbody（画面全体）になります。意図しない場所に飛んでしまう原因です。
❌ fixedで要素が他のコンテンツに重なる
fixedは通常の流れから外れるので、下のコンテンツが隠れます。bodyにpadding-topを追加して対処しましょう。
よくある疑問
Q: relativeとabsoluteの違いは？
A: relativeは元の位置を基準にずらす。absoluteは親要素（position指定あり）を基準に自由配置。absoluteは元の位置から外れます。
Q: fixedとstickyの違いは？
A: fixedは常に画面に固定。stickyはスクロールして特定位置に来たら固定される。ヘッダーの固定にはstickyが便利です。
Q: position: stickyが効かないときは？
A: ①top等のオフセット値を指定していない ②親要素にoverflow: hiddenがある ③親の高さがsticky要素と同じ、の3つが主な原因です。
関連用語
📖 関連レッスン
レッスンを見る →