positionで重ねる・固定する

スクロールしても上に貼りつくヘッダー、少し重ねて置いたバッジ、画面のすみに固定したボタン——。こうした「ふつうの流れから外れた配置」を叶えるのが position です。並べる（Flex・Grid）に対して、position は浮かせる・固定する係だと思ってください。

まずはfixed：画面に貼りつける

いちばん使いどころがわかりやすいのが fixed。スクロールしても動かず、画面に貼りついたままになります。上部に固定するヘッダーが定番です。

.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
}

top: 0; left: 0; で「画面の左上を基準に」貼りつけ、width: 100% で横いっぱいに。ページをどれだけスクロールしても、ヘッダーは常に見える位置にとどまります。

sticky：ふだんは流れ、来たら貼りつく

sticky は fixed の親戚。ふだんはふつうに流れていて、スクロールでその位置まで来ると、そこで貼りつくという便利な動きをします。

.section-title {
  position: sticky;
  top: 0;
}

長い記事で、見出しが上に貼りついて「今どこを読んでいるか」を教えてくれる——あの動きが sticky です。

positionの4つの置き方

position にはいくつか種類があります。まずは名前と役割だけ、ざっと。

• static … ふつうの流れ（初期値）
• relative … 元の位置を基準に、少しずらす
• absolute … 親を基準に、宙に浮かせる
• fixed … 画面に固定（スクロールしても動かない）
• sticky … ふだんは流れ、来たら貼りつく

残っていた小さな仕上げ

しまちゃんのページ、じつはあと少しだけ手つかずの部分が残っています。新しい道具は要りません——ここまで習ったfont-size・color・border-radiusなどを、残りの部品にも配るだけです。

見出し（じこしょうかい・すきなもの・れんらく）にclass="h2"を、引用の出典に.quote citeを、入力欄に枠線と角丸を、送信後のお礼メッセージとフッターに色を、それぞれ足します。

.h2 {
  font-size: 30px;
  font-weight: bold;
  margin: 12px 0 0;
}
.quote cite {
  display: block;
  margin-top: 6px;
  font-size: 13px;
  color: #6b635c;
  font-style: normal;
}
.contact-form input,
.contact-form textarea {
  font-size: 15px;
  padding: 10px 12px;
  width: 100%;
  border: 1px solid #e9e3d9;
  border-radius: 12px;
  background-color: #ffffff;
  color: #2c2622;
}
.form-note {
  margin: 12px 0 0;
  color: #3f9a78;
  font-weight: bold;
  font-size: 14px;
}
.site-footer {
  text-align: center;
  padding: 8px 24px 40px;
}
.copyright {
  color: #6b635c;
  font-size: 13px;
  margin: 0;
}

どれも初登場のプロパティは無く、「どの部品に・どのクラスをつけて」配るかだけの作業です。.form-noteはれんらくフォームの「おくる」を押すとお礼が表示される場所——JavaScriptトラックで動きをつけるとき、この緑色が効いてきます。

このレッスンのまとめ

1. position は、ふつうの流れから外して浮かせる・固定する係
2. まずは fixed（画面に固定）と sticky（来たら貼りつく）から
3. 重なり順は z-index（数字が大きいほど手前）

これでしまちゃんのページは/goalと同じ見た目になりました。最後にもう一歩——absolute と relative を組み合わせて、部品を狙った場所にピタッと重ねる合わせ技を覚えましょう。バッジやオーバーレイなど、出番の多いパターンです。 :::