Positionレイアウト練習②

概要

コードを編集し、以下の動画のようなレイアウトを作成してください。
positionのCSS指定で配置してください。

目標となる動画

ポジションによるスクロール追従のレイアウトができるようになる。

position: fixed;は、要素を画面（ビューポート）の決まった位置に固定します。ページをスクロールしても同じ位置に表示されるため、「TOPへ戻る」ボタンのような画面固定UIに向いています。

.page-top {
  position: fixed;
  right: 10px;
  bottom: 10px;
  z-index: 10;
}

position: sticky;は、要素が通常の流れにある状態から、指定位置へ到達したときに追従します。ヘッダーを画面上部へ追従させたい場合は、要件によってfixedとstickyを選びます。

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
}

完成動画を最後まで確認します。 ヘッダーとボタンが、いつからどの位置で追従するかを見ます。
「TOPへ戻る」ボタンから作ります。 position: fixed;、right: 10px;、bottom: 10px;を指定し、スクロール中も位置が変わらないことを確認します。
ヘッダーを追従させます。 課題の指定に合わせてfixedを使い、画面上端へ配置します。通常位置から追従させたい場合はstickyも試して違いを比較します。
重なり順を確認します。 ヘッダーやボタンが本文の下へ隠れる場合は、必要な要素だけにz-indexを指定します。
PC幅とスマートフォン幅で確認します。 ボタンが本文や操作部分を隠していないか、ヘッダー内の文字やメニューが画面からはみ出していないかを確認します。

fixedを指定した要素は通常の文書フローから外れるため、後ろの本文がヘッダーの下へ入り込むことがあります。その場合は、ヘッダーの高さに合わせて本文側へ余白を用意します。

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 72px;
  z-index: 20;
}

main {
  padding-top: 72px;
}

ヘッダーの高さを変更したときは、本文側の余白も確認してください。stickyを使える設計なら、通常フローに場所が残るため、この調整が不要な場合もあります。

topやbottomだけを書く： positionの値が既定のstaticのままでは、意図した固定配置になりません。
固定ヘッダーへ幅を指定しない： fixedにすると内容幅だけになることがあります。必要に応じてleft: 0;とwidth: 100%;を確認します。
すぐに非常に大きいz-indexを使う： まず同じ重なりの範囲にある要素を確認し、10、20など管理しやすい値で役割を分けます。
ボタンを画面端へ密着させる： タップしにくくなるため、右端・下端に適度な余白を残します。
見た目だけで完了にする： 「TOPへ戻る」リンクが実際にページ上部へ移動するか、キーボードでも操作できるか確認します。