CSSマスターへの道「Position」

Day 7: Position

今日のゴール：「スクロールしてもついてくるヘッダーや、画像の上に重なるバッジを実装する」

📚 今日のインプット：4 つの「基準」を知る

position プロパティを使う時、一番大事なのは「何（どこ）を基準に配置するか？」です。

値	基準となるもの	よく使う場面
static	なし（デフォルト）	何もしない普通の配置。
relative	本来あるべき位置	その場所から少しだけずらしたい時。または**absolute の基準点（親）にしたい時**。
absolute	親要素 ※	親の左上を原点として、好きな場所に配置。「画像右上の NEW アイコン」など。
fixed	ブラウザ画面	スクロールしても画面の同じ場所に居続ける。「トップへ戻るボタン」「モーダル」など。
sticky	スクロール位置	スクロールして画面端に来たらピタッと張り付く。「追従ヘッダー」「目次」など。

※ absolute を使う時は、親要素（または祖先）に position: relative が指定されている必要があります。これがないと、画面全体（body）を基準にして飛んでいってしまいます。「親に relative、子に absolute」 は CSS の鉄則です。

---

🛠️ 今日のアウトプット（お題）

「Position 全部盛りの Web ページ」を作ってください。

以下の 3 つの要件を満たすシンプルなページを作ります。

1. Sticky ヘッダー: ページをスクロールしても、途中から画面上部に張り付いてついてくるヘッダー。
2. Absolute バッジ: コンテンツ内のボックスの「右上」に、「SALE」や「New」というバッジを重ねて表示する。
3. Fixed ボタン: 画面の「右下」に、常に表示される「トップへ戻る（↑）」ボタンを置く。

雛形コード

今回は構造が少し複雑なので、ベースを使ってください。

<!-- 1. 追従するヘッダー -->
<header class="sticky-header">My Website</header>

<div class="container">
  <p>↓ スクロールしてみてください ↓</p>

  <!-- 2. 重ね合わせのデモ -->
  <div class="box-wrapper">
    <div class="box">
      商品画像やコンテンツ
      <!-- ここに絶対配置でバッジを乗せる -->
      <span class="badge">SALE</span>
    </div>
  </div>

  <!-- スクロール発生用のダミーテキスト（長い文章） -->
  <p>
    （ここに適当な長い文章を入れて、縦スクロールが発生するようにしてください...<br /><br /><br /><br /><br />スクロール...<br /><br /><br /><br /><br />もっとスクロール...）
  </p>
</div>

<!-- 3. 画面固定ボタン -->
<a href="#" class="fab-btn">↑</a>

---

💻 実装サンプル

正解例

See the Pen CSSマスターへの道「Position」 by サカツ (@saka2jp) on CodePen.

✅ チャレンジのポイント

1. sticky の挙動確認:
   • top: 0 を指定しないと機能しません。
   • 実は「親要素の高さの中」でしか追従しません。今回は body 直下に近いのでずっとついてきますが、特定のセクション内で使うと「そのセクションが終わったら消える」という挙動になります。
2. relative を外してみる:
   • .box の position: relative; を一時的にコメントアウトして削除してみてください。「SALE」バッジがどこに飛んでいくか確認しましょう（おそらくページの右上に飛んでいきます）。これが「基準点のロスト」です。
3. z-index (重なり順):
   • 固定ヘッダーやボタンが、他の画像の下に潜り込んでしまわないように、z-index で数値を指定して手前に持ってきます。

1 週間達成おめでとうございます！

これで Phase 1: レイアウトの達人 は修了です！
ボックスモデル、Flexbox、Grid、レスポンシブ、そして Position。
これらを組み合わせれば、世の中にある Web サイトのレイアウトの 9 割は再現できる基礎力がつきました。

明日からの Phase 2 は、いよいよ「見た目」を楽しくするターンです。
グラデーションや影を使って、リッチなデザインを作っていきましょう！