JP

CSS・並べる・配置する

positionで重ねる・固定する

画面の上に貼りつくヘッダー、スクロールで追従する見出し、重ねたバッジ——ふつうの流れから外して置くのがposition。

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

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

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

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

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

こちらも動かして見るのがいちばん。下の枠の中をスクロールしてみてください。青いヘッダーだけが上に貼りついたまま、うしろの文章だけが流れていきます。

.body-innerのpadding-topは、固定したヘッダーで本文の頭が隠れないための余白です。

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

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

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

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

言葉より、動かして見るのがいちばん。下の枠の中をスクロールしてみてください。オレンジのバーだけが上に貼りついたまま残ります。

静止画では伝わりにくい動きも、こうして実際にスクロールすると一目瞭然です。

positionの5つの置き方

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

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

fixedの落とし穴：本文の頭が隠れる

fixed にした部品は、ふつうの流れから外れて浮いてしまうため、後ろにある本文がその下に潜り込んで、頭の部分が隠れてしまうことがよくあります。

body {
  padding-top: 60px; /* 固定したヘッダーの高さぶん */
}

固定したヘッダーの高さぶんだけ、本文側にあらかじめ余白を用意しておくのが定番の対処です。「浮いている部品は、まわりの場所取りをしてくれない」——これが fixed と sticky の大きな違いでもあります。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（数字が大きいほど手前）

やってみよう：ヘッダーの追従と、残りの仕上げ

.lp-headerに、stickyを足しましょう。

.lp-header {
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 34px;
  background-color: #faf6ee;
  border-bottom: 1px solid #e9e3d9;
}

横並び・線・背景色はそのまま。ここで足すのはposition: sticky; top: 0;の2行だけです。

見出し・引用・入力欄・お礼メッセージ・フッターにも、クラスと仕上げのCSSを足しましょう。

<h2 class="h2">じこしょうかい</h2>
...
<p class="form-note" id="thanks"></p>
...
<footer class="site-footer">
  <p class="copyright">© 2026 しまちゃん — はじめてのホームページ</p>
</footer>
.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;
}
ブラウザ表示。見出しが大きく整い、入力欄に枠線と角丸がつき、フッターにやわらかい色の著作権表記が表示されている
スクロールしてもヘッダーはずっと見える位置に残り、細かな部品もひとつずつ仕上がりました。

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

よくある質問

position:fixedのヘッダーが本文に重なってしまうのはなぜ？
fixedの部品はふつうの流れから外れて浮くため、ほかの部品が場所を空けてくれなくなるからです。本文側の先頭に、ヘッダーの高さぶんの余白（padding-topなど）を足すのが定番の対処です。
position:stickyが効かないときは？
まず、貼りつく位置の指定（top:0など）を忘れていないか確認しましょう。positionとtopはセットです。親の高さが足りない場合や、親にoverflow:hiddenがある場合も貼りつきません。
重ねた部品の前後関係はどう変えるの？
z-indexで変えられます。数字が大きいほど手前に来ます。固定ヘッダーがほかの部品に隠れるときは、ヘッダーのz-indexを大きくしましょう。