【初心者向け】position fixedの使い方完全ガイド｜実装からトラブル解決まで

2025.05.28

「Webサイトにヘッダーをずっと画面の上部に表示させたい」

「スクロールしても追従してくるボタンを作りたい」

Web制作の学習を進める中で、そんな風に思ったことはありませんか？CSSの position: fixed; は、まさにそのためのプロパティです。しかし、基本的なプロパティでありながら、「思った通りに動かない」「他の要素の下に隠れてしまう」といった壁にぶつかりやすい、少し厄介な一面も持っています。

この記事では、Web制作を学び始めた初心者の方に向けて、position: fixed; の基本的な概念から、実際のWebサイトで使える実践的な実装パターン、そして多くの人がつまずく「効かない」ときのトラブルシューティングまで、体系的に解説します。

この記事を読めば、あなたは以下のスキルを習得できます。

position: fixed; の正しい使い方と動作原理がわかる
現場で即戦力となるCSS実装スキルが身につく
エラーに遭遇しても、自力で解決できる力が養える

あなたのポートフォリオをワンランクアップさせ、プロとして活躍するための土台を一緒に構築していきましょう。

・position: fixed; のPDFの資料も配布中です。
お好きにお使いください。
ダウンロードはこちら

position fixedとは？要素を画面に固定する基本概念

position: fixed; とは、CSSの position プロパティの一種で、要素をブラウザの表示領域（ビューポート）を基準に特定の位置へ固定するための値です。

一度 position: fixed; で配置された要素は、ユーザーがページをスクロールしてもその場に留まり続けます。

position fixedの特徴と動作メカニズム

position: fixed; の最大の特徴は、その基準点が常に「画面（ビューポート）」であることです。

通常の要素は、HTMLの記述順に上から下へと配置されます（position: static;）。しかし、position: fixed; を指定された要素は、その本来あるべき場所から切り離され、画面上の指定された座標に固定されます。

このとき、top、right、bottom、left というプロパティを使って、画面の四隅のどこを基準に、どれくらいの距離に配置するかを決定します。

他のposition値（static, relative, absolute, sticky）との違い

CSSの position プロパティには fixed 以外にもいくつか値があり、それぞれの挙動が異なります。特に absolute や sticky との違いに混乱する方が多いため、ここで整理しておきましょう。

position値	基準となる要素	スクロールへの追従	主な用途
`static`	（なし）HTMLの記述順	しない	初期値。特別な配置をしない場合。
`relative`	要素自身の元の位置	しない	`absolute` の基準点として使われることが多い。
`absolute`	`position: static` 以外が指定された直近の親要素	しない	親要素内での絶対位置指定。
`fixed`	ビューポート（画面）	する	固定ヘッダー、追従ボタンなど。
`sticky`	親要素の表示範囲内	する（条件付き）	スクロールに応じて途中から固定される要素。

position: fixed; が常に画面を基準にするのに対し、absolute は親要素、sticky は親要素の範囲内でだけ追従するという大きな違いがあります。

position fixedが使われる実際のWebサイト事例

position: fixed; は、Webサイトの様々な場所で活用されています。

固定ヘッダー/フッター: ユーザーがどこまでスクロールしても、常に主要なナビゲーションが表示される。
トップに戻るボタン: ページ下部までスクロールした際に、画面の右下などに表示される。
追従サイドバー/バナー: キャンペーン情報などを常に画面の隅に表示させる。
モーダルウィンドウ: ユーザーに何らかのアクションを促す際に、背景を暗くして中央に表示されるウィンドウ。

これらの実装方法については、後ほど詳しく解説します。

position fixed の基本的な書き方と実装方法

それでは、実際に position: fixed; を使ったコードの書き方を見ていきましょう。

基本的なCSS記述方法とプロパティ

最もシンプルな実装は、HTML要素に position: fixed; を指定し、位置を決めるプロパティを追加するだけです。

HTML

HTML

<div class="fixed-box">
  このボックスは固定されています
</div>

CSS

CSS

.fixed-box {
  position: fixed; /* 要素を固定する */
  top: 20px;       /* 画面の上から20pxの位置 */
  right: 20px;      /* 画面の右から20pxの位置 */
  background-color: #ffc107;
  padding: 1em;
  border-radius: 5px;
}

このコードにより、.fixed-box というクラスが付与された div 要素が、画面の右上から20pxの位置に常に表示されるようになります。

top, right, bottom, leftプロパティの使い方

top, right, bottom, left は、固定する位置を指定するための重要なプロパティです。これらはセットで使うことも、単体で使うことも可能です。

top: 0; left: 0;: 画面の左上に配置
bottom: 0; right: 0;: 画面の右下に配置
top: 50%; left: 50%;: このままだと要素の左上が画面中央に来ます。transform: translate(-50%, -50%); と組み合わせることで、要素自体を完全に中央揃えにできます。

z-indexを使った重なり順の制御方法

position: fixed; を使うと、要素は通常のコンテンツの流れから独立するため、他の要素と重なってしまうことがあります。この重なりの順序を制御するのが z-index プロパティです。

z-index には数値を指定し、数値が大きいほど手前（上）に表示されます。

CSS

.fixed-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #fff;
  z-index: 100; /* 他の要素より手前に表示させる */
}

.main-contents {
  margin-top: 80px; /* 固定ヘッダーの高さ分だけマージンを確保 */
  z-index: 1; /* ヘッダーより背面に */
}

z-index が指定されていない場合や、同じ数値の場合は、HTMLで後から記述された要素が手前に表示されます。position: fixed; を使う際は、意図しない重なりを防ぐために z-index を明示的に指定することを習慣づけましょう。

【実践編】position fixedの活用パターン3選

ここからは、実際のWebサイト制作で頻繁に使われる3つの実装パターンを、サンプルコードとともに紹介します。

1. 固定ヘッダーナビゲーションの実装方法

最も代表的な使用例です。ユーザビリティ向上に大きく貢献します。

HTML

HTML

<header class="site-header">
  <nav>
    </nav>
</header>
<main class="main-content">
  </main>

CSS

CSS

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 60px; /* ヘッダーの高さを指定 */
  background-color: #333;
  color: #fff;
  z-index: 1000;
  /* 他のデザインスタイル */
}

.main-content {
  padding-top: 60px; /* 固定ヘッダーの高さ分、コンテンツの開始位置をずらす */
}

ポイント: position: fixed; を指定した要素は、レイアウト上存在しないものとして扱われます。そのため、後続のコンテンツ（この場合は .main-content）がヘッダーの下に潜り込んでしまいます。これを避けるために、コンテンツ側にヘッダーの高さ分の padding-top や margin-top を設定する必要があります。

2. 「トップに戻る」ボタンの作成手順

ページが長くなった際に、ユーザーが簡単にページの先頭に戻れるようにするためのボタンです。

HTML

HTML

<a href="#" class="back-to-top">▲</a>

CSS

CSS

.back-to-top {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 50px;
  height: 50px;
  background-color: rgba(0, 0, 0, 0.7);
  color: #fff;
  border-radius: 50%;
  text-align: center;
  line-height: 50px;
  font-size: 24px;
  text-decoration: none;
  z-index: 999;
}

応用: このままだと常に表示されてしまいます。JavaScriptと組み合わせることで、「ある程度スクロールしたらフワッと表示される」といった動的な演出も可能です。

3. サイドバーメニューの固定表示テクニック

ブログやドキュメントサイトで、目次や関連リンクを常に表示させておきたい場合に有効です。

HTML

HTML

<div class="container">
  <aside class="fixed-sidebar">
    </aside>
  <main class="primary-content">
    </main>
</div>

CSS

CSS

.container {
  display: flex;
}

.fixed-sidebar {
  position: fixed;
  top: 80px; /* ヘッダーがある場合はその高さ分下げる */
  left: 20px;
  width: 250px;
  height: calc(100vh - 100px); /* ビューポートの高さから余白を引く */
  overflow-y: auto; /* コンテンツが多い場合はスクロール可能に */
  background-color: #f5f5f5;
}

.primary-content {
  margin-left: 290px; /* サイドバーの幅 + 余白分を確保 */
  width: 100%;
}

ポイント: 固定ヘッダーと同様に、メインコンテンツの margin-left を調整して、サイドバーとコンテンツが重ならないようにレイアウトを組むことが重要です。

position fixedが効かない時の原因と解決法

「コードは合っているはずなのに、なぜか position: fixed; が効かない！」これは多くの初学者が経験する壁です。ここでは、よくある原因とその解決策を詳しく解説します。

原因1: 親要素に `transform` プロパティが指定されている

これは最も気づきにくい、”ハマりポイント”です。

親要素や祖先要素に transform プロパティ (translate, scale, rotate など) が none 以外の値で指定されていると、position: fixed; の基準がビューポートではなく、その transform が指定された要素になってしまいます。

解決策: 開発者ツール（ブラウザでF12キー）を使って、固定したい要素の親を遡り、transform プロパティが適用されていないか確認してください。もし意図しない transform があれば、それを削除するか、HTMLの構造を見直して transform の影響を受けない場所に要素を移動させる必要があります。

これは私自身も駆け出しの頃に半日溶かした経験がある、非常に厄介な仕様です。この仕様を知っているだけで、デバッグの時間が大幅に短縮できます。

原因2: `z-index` が効いていない・競合している

要素は固定されているように見えるけれど、他の要素の下に隠れてしまっているケースです。

考えられる原因と解決策:

position が static のまま: z-index は position が static 以外の要素にしか効果がありません。position: fixed; を正しく指定しているか再確認しましょう。
スタッキングコンテキスト: 親要素の z-index が低い場合、子要素でいくら高い z-index を指定しても、その親要素より手前に表示することはできません。HTML構造全体を見渡し、重なりの親子関係（スタッキングコンテキスト）を正しく理解する必要があります。開発者ツールで要素の重なり順を確認しながら調整しましょう。

原因3: レスポンシブデザインでの意図しない挙動

スマートフォンなどの小さい画面で、固定ヘッダーが画面の大部分を占めてしまい、コンテンツが非常に見づらくなることがあります。

解決策: メディアクエリを使い、特定の画面幅（ブレークポイント）で position: fixed; を解除する、または高さを調整するなどの対応が必要です。

CSS

/* スマートフォン向けのスタイル */
@media (max-width: 768px) {
  .site-header {
    position: static; /* 画面幅が768px以下の場合、固定を解除する */
    /* または高さを低く調整する */
    /* height: 50px; */
  }

  .main-content {
    padding-top: 0; /* 固定解除に伴い、余白もリセット */
  }
}

これらのエラー解決法を知っておけば、現場で問題が発生しても冷静に対処できるようになります。

【上級者向け】position fixedの実務レベル活用法

基本をマスターしたら、さらに一歩進んだ実務レベルのテクニックを学び、あなたのスキルを差別化しましょう。

パフォーマンスを考慮した実装方法

position: fixed; を使った要素は、スクロールのたびに再描画が発生するため、パフォーマンスに影響を与える可能性があります。特にアニメーションと組み合わせる場合は注意が必要です。

ブラウザに「この要素はこれから変形しますよ」と事前に伝えておく will-change プロパティを使用することで、描画のパフォーマンスを向上させることができます。

CSS

.fixed-element {
  position: fixed;
  /* ... */
  will-change: transform; /* これからtransformが変更されることをブラウザに伝える */
}

ただし、will-change は多用すると逆にメモリを消費しパフォーマンスを低下させる可能性があるため、本当に必要な箇所に限定して使用しましょう。

JavaScriptとの組み合わせテクニック

JavaScriptを組み合わせることで、より高度でインタラクティブなUIを実現できます。

スクロール連動イベント: 特定の位置までスクロールしたらヘッダーのデザインを変える、追従ボタンを表示/非表示に切り替えるなど。
モーダルウィンドウの制御: 背景コンテンツのスクロールを禁止(body に overflow: hidden を付与)し、エスケープキーで閉じられるようにする。

これらの実装は、ユーザー体験を大きく向上させ、あなたのポートフォリオで技術力の高さをアピールする絶好の材料となります。

アクセシビリティ対応の実装ポイント

固定要素は、時にアクセシビリティ上の問題を引き起こすことがあります。全てのユーザーが快適にサイトを利用できるよう、以下の点に注意しましょう。

コンテンツの隠蔽: 固定要素が、画面下部の重要な情報やフォームのボタンを隠してしまわないか確認する。特に画面が小さいデバイスや、ブラウザを拡大表示した際に問題が起きやすいです。
キーボード操作: Tab キーでページ内を移動した際に、フォーカスが固定要素に適切に当たり、操作可能であることを確認する。意図せず背景の要素にフォーカスが移ってしまわないように注意が必要です。
「スキップリンク」の提供: 固定ヘッダーに多くのナビゲーションリンクがある場合、キーボード操作のユーザーが毎回それらをTabで通過しなくても済むよう、メインコンテンツへ直接ジャンプできる「スキップリンク」を設置することが推奨されます。

まとめ：position fixedをマスターして実践で活用しよう

今回は、CSSの position: fixed; について、基本から実践、トラブルシューティングまでを網羅的に解説しました。

この記事の重要ポイント

position: fixed;はビューポート（画面）を基準に要素を固定する。
top, left, z-index を使い、位置と重なり順を制御する。
後続コンテンツが下に潜り込むため、padding や margin でレイアウト調整が必須。
効かない原因の多くは、親要素の transform プロパティか z-index の競合。
実務ではパフォーマンスやアクセシビリティへの配慮も重要。

position: fixed; は、正しく使えばWebサイトの利便性を大きく向上させる強力な武器になります。しかし、その特性を理解せずに使うと、レイアウト崩れや予期せぬ不具合の原因にもなり得ます。

まずはこの記事で紹介したサンプルコードを実際に自分の手で書いてみてください。そして、あなたのポートフォリオサイトに固定ヘッダーや「トップに戻る」ボタンを実装してみましょう。一つひとつの成功体験が、あなたを「現場で通用するエンジニア」へと近づけてくれます。

・position: fixed; のPDFの資料も配布中です。
お好きにお使いください。
ダウンロードはこちら

・相対位置relativeと絶対位置absoluteをわかりやすく【CSS基礎-positionプロパティ】

・【初心者向け】position: absolute; の使い方完全ガイド｜よくあるエラーと解決法も解説

・【初心者向け】position:stickyの使い方完全ガイド｜fixedとの違いから実装まで

・【初心者向け】position fixedの使い方完全ガイド｜実装からトラブル解決まで

・【2025年】Flexbox初心者ガイド｜WEB制作で即戦力になるCSS技術

・CSS Grid Layout｜Web制作初心者が知るべき実装テクニック

この記事の執筆者：スゴヨクン
成果主義Webマーケター見習い。SEOから広告運用、アクセス解析まで「売れる仕組みづくり」を魔法のように研究中。
難しい用語もやさしく噛み砕いてお届けします。
「スゴくヨクなる」ヒントを、今日もあなたに。

この記事の監修者：川上晋平
株式会社スゴヨクにてマーケティング戦略の立案から実行までを統括。中小企業やスタートアップ向けにWeb広告運用、LP制作、SEO対策など幅広い支援を行っており、これまでに100社以上のデジタル施策をサポート。現場の視点とデータに基づいた分析力に定評があり、確かな実績と最新の知見に基づいた監修を行っています。
■資格：
Google アナリティクス認定資格
 Google 広告の検索広告認定資格
 Google 広告「ディスプレイ広告」認定資格