CSSでヘッダーやボタンを固定しようとして、position: fixed;を使ったものの、「ヘッダーの下に本文が隠れる」「右下ボタンが他の要素に潜る」「なぜか固定位置がズレる」と困ったことはありませんか。position: fixedは、要素を画面（ビューポート）を基準に固定するCSSです。スクロールしても同じ位置に表示し続けたいヘッダーやボタンに使います。
この記事では、position: fixed;の基本、よくある実装パターン、表示崩れの原因と対策、stickyとの違いまで解説します。
忍者CODEマガジンは、未経験からでもプロのエンジニアを目指せるプログラミングスクール「忍者CODE」が運営しているプログラミング情報サイトです。
- プログラミングの効果的な学習方法
- プログラミング用語の解説
- エンジニアのキャリアに関する情報
など、プログラミングを始めたばかりの初学者に役立つ記事を幅広く公開しています。
CSSのposition: fixedとは？基本的な特徴
position: fixed;とは、要素を画面の特定位置に固定するためのCSSです。
通常のHTML要素は、ページをスクロールすると一緒に上へ流れていきます。一方で、fixedを指定した要素はスクロールしても同じ場所に残ります。
.fixed-button {
position: fixed;
right: 24px;
bottom: 24px;
}この例では、要素が画面の右下に固定されます。
画面（ビューポート）を基準に要素を固定する仕組み
position: fixed;は、基本的にブラウザの表示領域であるビューポートを基準に配置されます。
top：画面上からの距離right：画面右からの距離bottom：画面下からの距離left：画面左からの距離
たとえば、top: 0;とleft: 0;を指定すると、画面の左上に固定されます。
.fixed-header {
position: fixed;
top: 0;
left: 0;
}fixedは、親要素ではなく画面を基準にするのが基本です。
スクロールしても常に同じ位置に表示される
fixedの大きな特徴は、スクロールしても要素が同じ位置に残ることです。
そのため、次のようなUIでよく使われます。
- 上部に固定するヘッダー
- 右下に固定するトップへ戻るボタン
- 画面下部に固定するお問い合わせボタン
- 画面中央に表示するモーダル
fixed要素は通常のレイアウトの流れから外れます。そのため、後ろのコンテンツがfixed要素の下に入り込むことがあります。
【実務で定番】position: fixedのよくある実装パターン
ここでは、実務でよく使うposition: fixed;のパターンを3つ紹介します。
上部に固定する「追従ヘッダー」
サイト上部のヘッダーを常に表示したい場合は、ヘッダーにposition: fixed;を指定します。
<header class="site-header">
<h1>サイト名</h1>
<nav>
<a href="#">ホーム</a>
<a href="#">講座一覧</a>
<a href="#">お問い合わせ</a>
</nav>
</header>
<main class="main-content">
<p>ここに本文が入ります。</p>
</main>.site-header {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 72px;
z-index: 1000;
background: #fff;
border-bottom: 1px solid #d8e2ea;
}
.main-content {
padding-top: 72px;
}このコードでは、ヘッダーを画面上部に固定し、本文側にヘッダーと同じ高さのpadding-topを指定しています。固定ヘッダーを作るときは、ヘッダーの高さ分だけ本文側に余白を作るのが重要です。
関連記事：「HTMLのnavタグとは？メニューでの使い方を解説」
右下に固定する「トップへ戻るボタン」
ページ右下に「トップへ戻る」ボタンを固定したい場合も、fixedが便利です。
<a class="page-top" href="#top">TOP</a>.page-top {
position: fixed;
right: 24px;
bottom: 24px;
z-index: 1000;
width: 56px;
height: 56px;
display: flex;
justify-content: center;
align-items: center;
background: #1f7a8c;
color: #fff;
text-decoration: none;
border-radius: 50%;
}右下固定ボタンは、スマホで画面を狭く感じさせることがあります。小さな画面ではサイズを少し小さくしたり、下部固定CTAと重ならないようにしたりしましょう。
@media (max-width: 600px) {
.page-top {
right: 16px;
bottom: 16px;
width: 48px;
height: 48px;
}
}固定ボタンは便利ですが、本文やCTAを隠すとユーザーの邪魔になります。スマホ表示では特に重なりを確認しましょう。
画面の真ん中に表示する「中央寄せの配置方法」
モーダルや通知パネルのように、画面中央に固定表示したい場合は、top、left、transformを組み合わせます。
<div class="fixed-modal">
<p>画面中央に表示される固定ボックスです。</p>
</div>.fixed-modal {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 1000;
width: min(90%, 420px);
padding: 24px;
background: #fff;
border: 1px solid #d8e2ea;
}top: 50%;とleft: 50%;だけでは、要素の左上が画面中央に来ます。transform: translate(-50%, -50%);で要素自身の半分だけ戻すことで、本当の中央に配置できます。
関連記事：「CSSで中央揃え・上下中央にする方法を解説」
【トラブル解決】position: fixedでよくある表示崩れと対策
position: fixed;は便利ですが、表示崩れの原因になりやすい指定でもあります。ここでは、実務でよく見るトラブルを整理します。
固定したヘッダーの下に要素が潜り込んで隠れる
固定ヘッダーで最も多いトラブルが、本文がヘッダーの下に入り込んで隠れる問題です。
.site-header {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 72px;
}このままだと、ヘッダーは通常の流れから外れるため、本文がページ上部から始まり、ヘッダーに隠れてしまいます。
.site-header {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 72px;
}
.main-content {
padding-top: 72px;
}fixed要素は通常の流れから外れるため、後ろの要素にpadding-topまたはmargin-topで余白を作る必要があります。
ヘッダーの高さを変更した場合、本文側のpadding-topも忘れずに調整しましょう。数値がズレると、余白が足りなかったり空きすぎたりします。
固定した要素が他のコンテンツの下に隠れてしまう
固定ボタンやヘッダーが他の要素の下に隠れる場合は、重なり順の問題かもしれません。
この場合はz-indexを指定します。
.site-header {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1000;
}z-indexは、要素の重なり順を指定するプロパティです。数値が大きいほど前面に表示されやすくなります。
z-indexをむやみに大きくし続けると管理しづらくなります。ヘッダー、モーダル、固定ボタンなど、役割ごとに数値のルールを決めておくと安全です。
関連記事：「CSSのz-indexや重なり順の注意点を解説」
横幅（width: 100%）が効かずに要素が縮んでしまう
固定ヘッダーを作ったときに、要素が画面幅いっぱいに広がらず、内容の幅だけに縮んで見えることがあります。
この場合は、left: 0;とright: 0;を指定するか、width: 100%;を明示します。
.site-header {
position: fixed;
top: 0;
left: 0;
right: 0;
}または、次のように書くこともできます。
.site-header {
position: fixed;
top: 0;
left: 0;
width: 100%;
}画面幅いっぱいの固定要素を作るなら、left: 0;とright: 0;をセットで指定すると扱いやすいです。
親要素の記述のせいで固定位置がズレる（親のtransform問題）
position: fixed;は基本的に画面を基準にします。しかし、親や祖先要素にtransformなどが指定されていると、期待と違う位置に固定されることがあります。
たとえば、次のようなコードです。
.page-wrapper {
transform: translateZ(0);
}
.fixed-button {
position: fixed;
right: 24px;
bottom: 24px;
}この場合、.fixed-buttonが画面ではなく、.page-wrapperを基準にしているように見えることがあります。
なぜtransformでfixedがズレるのか
ブラウザの仕様上、transform、filter、perspectiveなどが指定された祖先要素は、fixed要素の基準に影響することがあります。
実務では、アニメーションやパフォーマンス調整のために親要素へtransform: translateZ(0);などが入っていて、fixedの位置がズレるケースがあります。
- 固定したい要素を
body直下に近い場所へ移動する - 親や祖先要素の不要な
transformを外す - どうしても必要な場合は、固定要素をその親の外側に出す
fixedが画面基準にならないときは、親要素だけでなく祖先要素にtransform、filter、perspectiveなどが指定されていないか確認しましょう。
関連記事：「CSSで中央揃え・上下中央にする方法を解説」
どっちがいい？position: fixedとstickyの違いと使い分け
固定表示にはfixedだけでなく、position: sticky;もあります。
どちらもスクロールに関係する指定ですが、動き方は大きく違います。
| 比較 | fixed | sticky |
|---|---|---|
| 基準 | 基本は画面 | 親要素やスクロール範囲 |
| 通常の流れ | 外れる | 残る |
| スペース | 元のスペースが消える | 元のスペースが残る |
| 使う場面 | 常に表示したいヘッダー、固定ボタン | 見出し、目次、表のヘッダーなど一部範囲の追従 |
| 注意点 | コンテンツを隠しやすい | 親要素の高さやoverflowの影響を受けやすい |
fixed：完全に画面に固定され、元のスペースが消える
fixedは、スクロールしても常に画面の同じ位置に表示されます。
その代わり、通常の流れから外れるため、ヘッダー下の本文が隠れるなどの調整が必要になります。
.header {
position: fixed;
top: 0;
left: 0;
right: 0;
}sticky：特定のエリア内だけで粘着し、元のスペースが残る
stickyは、通常の位置に存在しながら、指定した位置に来たタイミングで固定されるような動きをします。
.section-title {
position: sticky;
top: 0;
}目次やセクション見出しのように、「その範囲内だけ追従してほしい」場合に便利です。
ヘッダー固定にはどちらを使うべきか？
ページ全体で常に表示したいグローバルヘッダーならfixedが向いています。一方で、セクション内の見出しや、特定のエリアだけ追従させたい要素ならstickyが向いています。
常に画面に固定したいならfixed、スクロール中に特定位置で止めたいならstickyと考えると使い分けやすいです。
position: fixedを使うときの実務チェックリスト
fixedを使うときは、次のポイントを確認しましょう。
| 確認項目 | 見るポイント | 対策 |
|---|---|---|
| 本文が隠れていないか | 固定ヘッダーの下に本文が潜っていないか | 本文にpadding-topを指定する |
| 重なり順 | 固定要素が他の要素の下に隠れていないか | z-indexを指定する |
| 横幅 | ヘッダーが画面幅いっぱいに広がっているか | left: 0; right: 0;を指定する |
| スマホ表示 | 固定ボタンが本文やCTAを隠していないか | サイズや位置をメディアクエリで調整する |
| 親のCSS | 祖先要素にtransformなどがないか |
固定要素を外側へ出す、不要な指定を外す |
fixedは便利ですが、常に画面上に残るため、ユーザーの閲覧を邪魔しないサイズ・位置に調整することが大切です。
公式ドキュメントも確認する
position: fixed;やsticky、基準位置の仕様を正確に確認したい場合は、MDN Web Docsの公式情報も参考になります。
- HTML・CSSを学んで自分だけのスキルを身につけたい
- HTML・CSSのスキルを身につけてwebクリエイターとして活躍したい
- サポートが充実しているプログラミングスクールを知りたい
そんな思いを持った方は忍者CODEのWeb制作コースがおすすめです！
忍者CODEは未経験からでもプロのエンジニアを目指せるオンラインプログラミングスク―ルです。
期間制限なく動画を視聴できるので、自分のペースで学習することができます！
まとめ：position: fixedをマスターして快適なサイトを作ろう
この記事では、CSSのposition: fixed;について解説しました。
position: fixedは、要素を画面に固定するためのCSSです。追従ヘッダー、トップへ戻るボタン、画面中央のモーダルなどでよく使われます。ただし、fixed要素は通常の流れから外れるため、ヘッダーの下に本文が隠れる、要素が他のコンテンツの下に潜る、横幅が縮む、親のtransformで位置がズレるといったトラブルが起こりやすいです。
表示崩れが起きたら、次の順番で確認してみましょう。
- 本文側に固定要素分の余白があるか
z-indexで重なり順を調整しているかleft: 0; right: 0;やwidth: 100%;を指定しているか- 祖先要素に
transformなどが入っていないか fixedではなくstickyの方が適していないか
