CSS基礎 練習問題 45：位置の固定（スクロール追従）
ページをスクロールした際、ある要素が画面の特定の位置（例えば上部）に到達した時点でそこに固定され、それ以上スクロールしても追従して表示され続けるようにしたい場合、正しいCSSの指定はどれか。
- position: fixed;
- position: absolute;
- position: static;
- position: sticky;
- position: relative;
正解と解説を見る
正解：position: sticky;
スクロールに応じて特定の位置で要素を固定表示させるには「position: sticky;」が正解です。
【正解の理由】
「position: sticky;」は、要素が指定された閾値（例：top: 0）に達するまでは相対的に配置され、達した時点から固定されるという動作を実現します。
【不正解の理由】
• 「position: fixed;」は最初から画面上の特定位置に固定されてしまい、スクロールの途中で固定されるわけではない
• 「position: absolute;」は親要素を基準に絶対配置されるだけで、スクロールには追従しない
• 「position: static;」は通常の文書フローに従うデフォルトの配置方法であり、固定されない
• 「position: relative;」は現在の位置からの相対配置であり、スクロール時には画面外へ移動してしまう