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

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

2022/07/14

2025/07/30

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

かめるん先生

よくWebサイトで、画面の右下にボタンが固定されているもの見ますよね！

あれは、position: fixed;で作られていることが多いですね！

この記事で身につく内容

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

無料で30日間、Web制作が学べる『ZeroPlus Gate』
プログラミングに関する質問をエンジニアへ「し放題」のサービス！

Web制作に特化したカリキュラム
自分のペースで50本以上の動画教材で学べる
あなた専属のメンターと作る、あなただけの学習ロードマップ
30日間、回数無制限でエンジニアに質問可

公式サイトを見る

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;を指定するときの特徴は、要素が通常の位置から浮いたような状態になる点です。次のような場合を見てみましょう。

かめるん先生

これはposition: absolute;の特徴とも一緒ですね！

<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の挙動の違いを、実際のコードを使って確認してみましょう。

かめるん先生

これらの特徴以外にもposition: fixed; は「高さを失う」position: 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の他にも「relative」「absolute」「static」「sticky」などがあります。特に「relative」と「absolute」を組み合わせた要素の配置はよく使われる技術のため、position: fixed;と併せて習得しておくことがおすすめです。

参考記事

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