ZeroPlus Media > Web制作 > HTML/CSS > 【CSS】position: fixed;で要素を固定する方法を徹底解説！stickyとの違いも紹介

【CSS】position: fixed;で要素を固定する方法を徹底解説！stickyとの違いも紹介

2022/07/14

2025/04/16

ヘッダーやトップに戻るボタンが、スクロールに合わせてついてくるWebサイトを見かけることはありませんか？これには要素にposition: fixed; を指定して、要素の位置を画面に固定する技術が使われています。本記事ではpositionプロパティの中でも、fixedの使い方に特化して解説しているため、ぜひ参考にしてみてくださいね。

この記事で身につく内容

position: fixed; の使い方
position: sticky; との違い
position: fixed; が効かないときの対処方法

無料でプログラミングの質問ができるサービス

30日間無料でWeb制作が学べるZeroPlus Gate！

Web制作に特化
50本以上の動画教材で学べる
30日間に4回の学習サポート面談がある
Slackで質問し放題

公式サイトを見る

ZeroPlus Gate（ゼロプラスゲート）は怪しい？評判・口コミを運営がエゴサしてみた

プログラミング学習でこのような経験はありませんか？

目標に向けて何を学べば良いかわからない
調べても解決策が見つからない
現場レベルのスキルが身につくのか不安

これらの悩みは、学習環境を整えることで全て解決することができます。

ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。

なんでも相談できる専属メンター
いつでも技術相談ができるプロ講師
元IT企業CTO監修のカリキュラム

条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。

少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。

今すぐZeroPlus Gateの詳細を見る

要素位置を固定するposition: fixed;の使い方
position: fixed; の使い所3選
position: fixed;とposition: sticky; との違い
position: fixed;が効かないときの原因と対処法
まとめ

要素位置を固定するposition: fixed;の使い方

positionは、要素の配置を指定するCSSプロパティです。positionの初期値はstaticで、値にfixedを指定することで要素の位置を固定できます。要素を固定する位置はCSSプロパティtop, bottom, left, rightで指定できます。

position: fixed;の基本の書式は以下のようになります。

基本書式

セレクタ {
  position: fixed;
  top: 値;
  right: 値;
  bottom: 値;
  left: 値;
}

position: fixed; は画面が基準になる

position: fixed;が適用された要素は、基準位置が画面（ビューポート）になります。top: 50px;、left: 50px; と指定する場合は、画面上から50px、画面左から50pxの位置に要素が配置されます。

<div class="box"></div>

.box {
  width: 250px;
  height: 250px;
  background: orange;
  position: fixed;
  top: 50px; /* 画面上から50px */
  left: 50px; /* 画面左から50px */
}

出力結果

See the Pen fixed by ZeroPlus (@zeroplus-programming) on CodePen.

次の画像のようにイメージしてみると、より理解が深まります。

position のfixedを指定すると通常配置から浮いたようになる

position: fixed;を指定するときの特徴は、要素が通常の位置から浮いたような状態になる点です。次のような場合を見てみましょう。

<div class="fixed"></div>
<p>テキストが入ります。</p>

p {
  font-size: 16px;
  font-weight: bold;
}

.fixed {
  width: 100%;
  height: 80px;
  background: orange;
  top: 0;
  left: 0;
}

出力結果

See the Pen position-fixed-基本 by ZeroPlus (@zeroplus-programming) on CodePen.

position: fixed; によってfixedクラス（オレンジの要素）が固定されました。fixedクラスは浮いたような状態になり、pタグのテキストが上に詰まります。

これを検証するため、fixedクラスを半透明にする指定opacity: 0.5;を追記してみましょう（0は省略して書けます）。

.fixed {
  width: 100%;
  height: 80px;
  background: orange;
  position: fixed;
  top: 0;
  left: 0;
  opacity: .5; /* 追記 半透明にする */
}

出力結果

See the Pen position-fixed-opacity by ZeroPlus (@zeroplus-programming) on CodePen.

fixedクラスが半透明になり、裏にあるテキストが見えるようになりました。これによりfixedクラスが浮いた状態になり、テキスト要素が裏に回っている様子がよく分かります。

無料で30日間、HTML/CSSの基礎学習ができるプログラミングスクール

ZeroPlus Gateの詳細を見る

受講できる人数は毎日先着制！

z-indexで重なり順を変更

positionを指定する場合、重なり順を指定するCSSプロパティ「z-index」を指定できます（staticが指定されている場合を除く）。z-indexは数値が大きいほど前に、小さいほど後ろに配置される特徴を持ちます。

参考記事【CSS】z-indexの使い方を徹底解説！効かないときの原因は4つ

実際にposition: fixed;とz-indexを組み合わせて、要素の重なり順をコントロールしてみます。以下のコードをご覧ください。

<div class="fixed"></div>
<div class="contents">
  <p>1行目のテキストが入ります</p>
　<p>2行目のテキストが入ります</p>
　<p>3行目のテキストが入ります</p>
　<p>4行目のテキストが入ります</p>
　<p>5行目のテキストが入ります</p>
</div>

.fixed {   
  width: 100%; 
  height: 80px;   
  background: orange; 
  position: fixed;
  top: 0;
  left: 0;
}
 
.contents {   
 width: 100%;   
 height: 2000px;   
 background: skyblue; 
}

fixedクラスにはposition; fixed;を指定しているため、浮いた状態になり、contentsクラスは下に重なります。

fixedクラスの要素の上にcontentsクラスが表示されるようにするためには、以下のように裏側の要素にz-indexを追記します。

.fixed {
  width: 100%;
  height: 80px;
  background: orange;
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1; /* 追記 */
}

出力結果

See the Pen fixed-z-index-1 by ZeroPlus (@zeroplus-programming) on CodePen.

z-index: -1; を適用したため、fixedクラスはcontentsクラスの裏側に配置されました。

無料で30日間、プロにHTML／CSSの質問ができる環境

ZeroPlus Gateの詳細を見る

受講できる人数は毎日先着制！

position: fixed; の使い所3選

position: fixed;を使うのは、主に以下の3つの場面です。

ヘッダーを固定するとき
トップに戻るボタンを固定するとき
追従フッターを制作するとき

それぞれ詳しく解説します。

fixed でヘッダーを固定する

position: fixed; を使って、ヘッダーを画面に固定させる方法を紹介します。

fixedでヘッダーを固定する

<header class="header">
  <div class="header__inner">
    <h1 class="header__title">ロゴ</h1>
      <nav class="header__nav">
        <ul class="nav__items">
          <li class="nav__item">メニュー</li>
          <li class="nav__item">メニュー</li>
          <li class="nav__item">メニュー</li>
          <li class="nav__item">メニュー</li>
        </ul>
     </nav>
   </div>
</header>
<main>
  <div class="contents">
  </div>
</main>
<footer></footer>

.header {
  width: 100%;
  padding-top: 20px;
  padding-bottom: 20px;
  background: orange;
  position: fixed;
  top: 0;
  left: 0;
}

.header__inner {
  padding-right: 20px;
  padding-left: 20px;
  display: flex;
  align-items: center;
}

.header__title {
  display: block;
  width: 100%;
}

.header__nav {
  width: 100%;
}

.nav__items {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.nav__item {
  list-style: none;
  margin-right: 16px;
}

.nav__item:last-child {
  margin-right: 0;
}

.contents {
  height: 2000px;
  width: 100%;
  background: rgb(255,201,114);
  background: linear-gradient(118deg, rgba(255,201,114,1) 0%, rgba(246,179,84,1) 40%, rgba(231,229,97,1) 100%);
}

出力結果

See the Pen fixed-header by ZeroPlus (@zeroplus-programming) on CodePen.

ヘッダーが画面に固定され、スクロールに合わせて追従するようになりました。

fixed で「トップに戻るボタン」を固定

「トップに戻るボタン」とは、クリックするとWebページのトップまで移動できるボタンのことです。Webページの使いやすさを向上させるため、「トップに戻るボタン」が、画面の右下あたりに配置されていることがよくあります。「トップを戻るボタン」の作り方は以下のとおりです。

position: fixed;で「トップに戻るボタン」を右下に固定

<header class="header"></header>
<main>
  <div class="contents">
  </div>
</main>
<div class="back-to-top">
 <a href=""></a>
</div>
<footer></footer>

.header {
  width: 100%;
  height: 120px;
  background: orange;
}

.contents {
  height: 2000px;
  width: 100%;
  background: rgb(255,201,114);
  background: linear-gradient(118deg, rgba(255,201,114,1) 0%, rgba(246,179,84,1) 40%, rgba(231,229,97,1) 100%);
}

.back-to-top {
  z-index: 100;
  position: fixed;
  right: 30px;　/* 画面右から30px */
  bottom: 80px; /* 画面下から80px */
  width: 40px;
  height: 40px;
  border: 1px solid #ffffff;
  border-radius: 50%;
  background: blue;
  cursor: pointer;
}

.back-to-top a {
  display: inline-block;
  position: relative;
  width: 100%;
  height: 100%;
}

.back-to-top a:before {
  position: absolute;
  width: 10px;
  height: 10px;
  transform: rotate(-45deg);
  border-top: solid 2px #ffffff;
  border-right: solid 2px #ffffff;
  content: "";
  transform: rotate(-45deg) translate(-17%, -50%);
  top: 50%;
  left: 50%;
}

出力結果

See the Pen Untitled by ZeroPlus (@zeroplus-programming) on CodePen.

トップに戻るボタンが右下に固定されました。ボタンはaタグで作成しており、href属性を空の状態にしておくと、クリックしたときページのトップに戻れるように指定されます。

また矢印の部分は、以下のように擬似要素で作成しています。

.back-to-top a:before {   
　position: absolute;   
　width: 10px;   
　height: 10px;   
　transform: rotate(-45deg);   
　border-top: solid 2px #ffffff;  /* 矢印部分 */
　border-right: solid 2px #ffffff;   /* 矢印部分 */
　content: "";   
　transform: rotate(-45deg) translate(-17%, -50%);   /* 矢印の回転と位置調整 */
　top: 50%;   
　left: 50%; 
}

矢印はborder-topとborder-rightで表現し、transformで回転させ、位置調整しています。

参考記事CSSの擬似要素で擬似的に要素を追加しよう

fixed でフッターを追従させる

fixed を使って、フッターを画面下部に固定することもできます。フッターを追従型にすることで、ユーザーにクリックしてもらいたいボタンを常時表示させたり、別ページへ誘導したりできます。

fixed でフッター追従ボタン

<header class="header"></header>
  <main>
    <div class="contents">
    </div>
  </main>
<footer></footer>
<div class="button-wrap">
  <button class="button">追従ボタン</button>
</div>

.header {
  width: 100%;
  height: 120px;
  background: orange;
}

.contents {
  height: 2000px;
  width: 100%;
  background: rgb(255,201,114);
  background: linear-gradient(118deg, rgba(255,201,114,1) 0%, rgba(246,179,84,1) 40%, rgba(231,229,97,1) 100%);
}

.button-wrap {
  z-index: 100;
  position: fixed;
  left: 0; /* 画面左端に固定 */
  bottom: 0; /* 画面下に固定 */
  width: 100%;
  padding-top: 20px;
  padding-bottom: 20px;
  background: #fff;
}

.button {
  width: 100%;
  max-width: 280px;
  height: 40px;
  margin-right: auto;
  margin-left: auto;
  background: orange;
  display: block;
}

出力結果

See the Pen fixed-footer by ZeroPlus (@zeroplus-programming) on CodePen.

このようにフッターメニューが常時表示されることで、Webサイト内の回遊性を高められます。

プロ講師に質問し放題で安心して学習！

ZeroPlus Gateの詳細を見る

費用は一切かからないサービスです

position: fixed;とposition: sticky; との違い

position: fixed; とposition: sticky; は、どちらも要素が追従する指定のため類似していますが、異なる点もあります。

position: fixed; ・・・画面が基準となって固定される
position: sticky; ・・・親要素の中で固定される

fixedとstickyの挙動の違いを、実際のコードを使って確認してみましょう。

<div class="container">
  <div class="fixed"></div>
  <div class="sticky"></div>
</div>
<div class="contents"></div>

.container {
  width: 100%;
  height: 1000px;
  background: rgb(255,201,114);
  background: linear-gradient(118deg, rgba(255,201,114,1) 0%, rgba(246,179,84,1) 40%, rgba(231,229,97,1) 100%);
}

.fixed {
  width: 250px;
  height: 250px;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1;
  background: orange;
}

.sticky {
  position: sticky;
  top: 0;
  left: 250px;
  width: 250px;
  height: 250px;
  background: blue;
}

.contents {
  width: 100%;
  height: 500px;
  background: lightcoral;
  position: relative;
}

出力結果

See the Pen fixed-sticky by ZeroPlus (@zeroplus-programming) on CodePen.

fixedクラスは親要素のcontainerクラスを飛び越えて追従しているのに対し、stickyクラスはcontainerクラスの中でのみ追従しています。

position: fixed;が効かないときの原因と対処法

position: fixed; が効かない場合は、以下のような理由が考えられます。

z-indexが負けている
先祖要素・親要素にtransformが設定されている
fixedを適用している要素のheightを%指定している

z-indexが負けている

positionプロパティを指定した要素はz-indexで重なり順を指定でき、z-indexの値が大きいほど前に表示されます。

そのためfixedを適用している要素が、他の要素と比較してz-indexの数値の大きさで負けていないか確認してみましょう。特に0未満の数字（マイナスの数字）が指定されている場合、前に表示されない場合があります。もしz-indexの数字が他の要素に比べて負けている場合は、値を調整してみましょう。

先祖要素、親要素にtransformが設定されている

position: fixed; を適用している要素の親要素・先祖要素に、要素の形状を変形させるCSSプロパティ「transform」を適用していると、fixedが効かなくなります。

<div class="container">
  <header class="header"></header>
  <main>
    <div class="contents">
    </div>
  </main>
  <footer></footer>
</div>

.container {
  transform: translate(0 ,0);　/* fixedが効かなくなる */
}

.header {
  width: 100%;
  height: 120px;
  background: orange;
  position: fixed;
  top: 0;
  left: 0;
}

.contents {
  height: 2000px;
  width: 100%;
  background: rgb(255,201,114);
  background: linear-gradient(118deg, rgba(255,201,114,1) 0%, rgba(246,179,84,1) 40%, rgba(231,229,97,1) 100%);
}

出力結果

See the Pen fixed-transform by ZeroPlus (@zeroplus-programming) on CodePen.

最もかんたんな対処法は親要素や先祖要素のtransformを削除することです。もしtransformを外せない場合は、fixedを適用した要素を、その親要素の外側に配置してあげましょう。たとえば以下のように書き換えます。

<header class="header"></header>　<!-- transformプロパティが適用されたcontainer要素の外に出す -->
<div class="container"> <!-- transformプロパティが設定されている -->
  <main>
    <div class="contents"> </div>
  </main>
 <footer></footer>
/div>

この配置なら親要素のtransform指定を保持したまま、fixedの追従が効くようにできます。
※transform以外にperspective、filterを指定する場合も同様の事象が発生します。

fixedを適用している要素のheightを%指定している

position: fixed;を指定した要素は、配置基準が常に画面（ビューポート）となります。heightへの%指定もこれに準じて、画面（ビューポート）の高さに対する割合として計算されます。たとえば、height: 100%;を指定した場合、その要素の高さはビューポートの高さと完全に一致します。

<header class="header"></header>
<main>
  <div class="contents">
  </div>
</main>
<footer></footer>

.header {
  width: 100%;
  padding-top: 20px;
  padding-bottom: 20px;
  height: 100%; /* 高さを%指定している */
  background: orange;
  position: fixed;
  top: 0;
  left: 0;
}

.contents {
  height: 2000px;
  width: 100%;
  background: rgb(255,201,114);
  background: linear-gradient(118deg, rgba(255,201,114,1) 0%, rgba(246,179,84,1) 40%, rgba(231,229,97,1) 100%);
}

出力結果

See the Pen fixed-height by ZeroPlus (@zeroplus-programming) on CodePen.

通常、heightを%指定すると、親要素の高さを基準に計算されます。しかし、position: fixed;を指定した要素では、例外的に計算基準が常にビューポートの高さになるため、注意が必要です。一方、px指定を使う方がレイアウトは組みやすくなります。

まとめ

要素を画面上に固定し、スクロール時に追従させたいときにposition: fixed; は活用できます。ヘッダーやトップに戻るボタン、クリックさせたい広告やボタンに対して使われています。基本の書式は以下のとおりです。

セレクタ {
  position: fixed;
  top: 値;
  right: 値;
  bottom: 値;
  left: 値;
}

このように固定したい要素に position: fixed;を指定し、要素を固定する位置は、CSSプロパティtop, bottom, left, rightで調整します。このとき基準位置が画面となり、top: 50px;、left: 50px; と指定する場合は、画面上から50px、画面左から50pxの位置に要素が配置されます。

また、position: fixed;を指定した要素は浮いたような状態になるため、HTMLの構造上、後に書く要素が裏へと回るような性質を持ちます。

こうした要素と要素の重なり順は、positionを指定している要素にz-indexを指定することで、コントロールできます。z-indexは、値の数字が大きいほど前に、小さいほど後ろに配置される特徴を持ちます。

たとえば、position: fixed;を指定している要素にz-index: -1; を適用すれば、重なり順を変更することもできます。

こうした基本の書式や特徴をしっかり押さえてposition: fixed;を使いこなしてみましょう。

なお、positionプロパティは今回解説したfixedの他にも「relative」「absolute」「static」「sticky」などがあります。特に「relative」と「absolute」を組み合わせた要素の配置はよく使われる技術のため、position: fixed;と併せて習得しておくことがおすすめです。

参考記事

【CSS】position: absolute;とposition: relative;をセットで使う方法を分かりやすく解説

プログラミング学習でこのような経験はありませんか？