CSS Tips | 超実務コアCSSテクニック：レイアウト基礎 － position: fixed

Web APP CSS
スポンサーリンク

position: fixed は「画面に貼り付けて、スクロールしても動かさない」

position: fixed は、要素を「画面（ビューポート）」に固定するためのプロパティです。
スクロールしても、その要素は常に同じ位置に居続けます。

ナビゲーションバー、フッターバー、右下の「ページトップへ」ボタン、全画面モーダルのオーバーレイなどでよく使われます。
absolute と似ていますが、「ページではなく画面に対して固定される」という点が決定的に違います。

基本の挙動と absolute との違い

画面（ビューポート）を基準に top / right / bottom / left で配置する

最もシンプルな例から見てみます。

.fixed-box {
  position: fixed;
  top: 20px;
  right: 20px;
  background: #111827;
  color: #f9fafb;
  padding: 8px 12px;
  border-radius: 4px;
}
CSS
<div class="fixed-box">
  固定ボックス
</div>
HTML

このボックスは、ページをどれだけスクロールしても「画面右上から 20px・20px」の位置に居続けます。
absolute のように「親要素」を基準にするのではなく、「ブラウザの表示領域」そのものが基準になります。

Tailwind で同じことを書くとこうなります。

<div class="fixed top-5 right-5 bg-slate-900 text-slate-50 px-3 py-2 rounded">
  固定ボックス
</div>
HTML

fixed が position: fixed;、top-5 right-5 が位置指定です。

例1: 画面上部に固定ヘッダーを作る

CSS 版

.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 56px;
  background: #0f172a;
  color: #e5e7eb;
  display: flex;
  align-items: center;
  padding: 0 16px;
  z-index: 50;
}

.content {
  padding-top: 56px;
}
CSS
<header class="header">
  固定ヘッダー
</header>

<main class="content">
  長いコンテンツがここに入ります…
</main>
HTML

ここで重要なのは、ヘッダーを fixed にすると「通常フローから外れる」ため、
そのままだとコンテンツがヘッダーの裏側に潜り込んでしまうことです。
それを防ぐために、main 側に padding-top でヘッダーの高さ分だけ余白を足しています。

Tailwind 版

<header class="fixed top-0 left-0 right-0 h-14 bg-slate-900 text-slate-100 flex items-center px-4 z-50">
  固定ヘッダー
</header>

<main class="pt-14">
  長いコンテンツがここに入ります…
</main>
HTML

fixed top-0 left-0 right-0 で「画面上部に横いっぱいのバー」を作り、
pt-14 でコンテンツをヘッダーの下から始めています。

例2: 画面下部に固定フッターバーを作る

スマホサイトでよくある「下部固定メニュー」も fixed の典型例です。

CSS 版

footer.fixed-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 56px;
  background: #ffffff;
  border-top: 1px solid #e5e7eb;
  display: flex;
  align-items: center;
  justify-content: space-around;
  z-index: 40;
}

.page {
  min-height: 100vh;
  padding-bottom: 56px;
}
CSS
<div class="page">
  <main>
    コンテンツ…
  </main>
  <footer class="fixed-bar">
    メニュー1 メニュー2 メニュー3
  </footer>
</div>
HTML

ここでも、フッターが fixed で通常フローから外れるため、
ページ全体に padding-bottom を付けて「フッターの分だけ下に余白」を確保しています。

Tailwind 版

<div class="min-h-screen pb-14">
  <main class="p-4">
    コンテンツ…
  </main>

  <footer class="fixed left-0 right-0 bottom-0 h-14 bg-white border-t border-gray-200 flex items-center justify-around">
    <button class="text-sm">ホーム</button>
    <button class="text-sm">検索</button>
    <button class="text-sm">設定</button>
  </footer>
</div>
HTML

fixed left-0 right-0 bottom-0 で「画面下部に横いっぱいのバー」を作り、
pb-14 でコンテンツがバーの下に隠れないようにしています。

例3: 右下の「ページトップへ」ボタン

CSS 版

.back-to-top {
  position: fixed;
  right: 24px;
  bottom: 24px;
  width: 44px;
  height: 44px;
  border-radius: 9999px;
  background: #0f172a;
  color: #f9fafb;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(15,23,42,0.4);
}
CSS
<button class="back-to-top">
  ↑
</button>
HTML

スクロールしても常に右下に居続けるボタンになります。
JavaScript と組み合わせれば、クリックでページトップに戻すことができます。

Tailwind 版

<button class="fixed right-6 bottom-6 w-11 h-11 rounded-full bg-slate-900 text-slate-50 flex items-center justify-center shadow-lg">
  ↑
</button>
HTML

fixed right-6 bottom-6 で「右下に貼り付け」、
丸ボタンにして目立たせています。

例4: 全画面モーダルのオーバーレイ

モーダルやメニューの「画面全体を覆う黒い半透明の背景」も fixed の代表例です。

CSS 版

.overlay {
  position: fixed;
  inset: 0;
  background: rgba(15,23,42,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
}

.modal {
  background: #ffffff;
  padding: 24px;
  border-radius: 8px;
  width: 320px;
}
CSS
<div class="overlay">
  <div class="modal">
    モーダルの中身
  </div>
</div>
HTML

inset: 0; は top: 0; right: 0; bottom: 0; left: 0; のショートカットで、
画面全体を覆うレイヤーになります。

Tailwind 版

<div class="fixed inset-0 bg-slate-900/50 flex items-center justify-center z-50">
  <div class="bg-white p-6 rounded-lg w-80">
    モーダルの中身
  </div>
</div>
HTML

fixed inset-0 で「画面全体」、
flex items-center justify-center で中央寄せ、
bg-slate-900/50 で半透明の暗い背景を作っています。

position: fixed を使うときの注意点と設計のコツ

通常フローから完全に外れることを意識する

fixed の要素は、absolute と同じく「周りのレイアウトに参加しません」。
そのため、ヘッダーやフッターバーを fixed にしたときは、
コンテンツ側に padding-top や padding-bottom を足して「隠れないスペース」を確保する必要があります。

これを忘れると、「上の方のテキストがヘッダーの裏に隠れて読めない」といった事故が起きます。

スクロールしても常に見えていてほしいものだけに使う

fixed は強力ですが、多用すると画面が窮屈になります。
本当に「常に見えていてほしい UI」だけに絞るのが大事です。

例えば、固定ヘッダー、固定フッターメニュー、右下のアクションボタン、モーダルのオーバーレイなどは、
ユーザーにとって「いつでも触れた方が便利」な要素なので fixed と相性が良いです。

Tailwind では「fixed ＋ inset / top / bottom / left / right」の組み合わせを覚える

よく使うパターンはだいたい決まっています。

画面上部にバー
fixed top-0 left-0 right-0

画面下部にバー
fixed bottom-0 left-0 right-0

全画面オーバーレイ
fixed inset-0

右下のボタン
fixed right-6 bottom-6

このあたりを手癖で書けるようになると、レイアウトの幅が一気に広がります。

まとめ

position: fixed は

画面（ビューポート）を基準に要素を固定し、スクロールしても動かさないためのプロパティです。
ヘッダー、フッターバー、右下ボタン、モーダルオーバーレイなど、「常に見えていてほしい UI」に向いています。

CSS では

position: fixed;
top: 0;
left: 0;
right: 0;
CSS

Tailwind では

class="fixed top-0 left-0 right-0"
HTML

のように書きます。

スポンサーリンク
タイトルとURLをコピーしました