ZeroPlus Media > Web制作 > HTML/CSS > 【CSS】positionのfixedで要素を固定！具体的な使い方を解説

【CSS】positionのfixedで要素を固定！具体的な使い方を解説

HTML/CSS

2022/07/14

2023/05/08

この記事では、「要素の位置を固定するposition: fixed;」について解説します。

Webサイトをスクロールしながら閲覧するとき、ページ上部のヘッダーやトップに戻るボタンなどが、スクロールにあわせて追従する動きを見かけることはありませんか？そこでは多くの場合、position: fixed; が使われています。

Webサイトのコンテンツによってはコンテンツを画面に固定させて表示させたい場合があるので、その場合はfixedを活用するといいでしょう。

なお、positionプロパティはfixedの他にも下記の4つがあります。

relative
absolute
static
sticky

この記事で身につく内容

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

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

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

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

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

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

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

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

今すぐZeroPlus Gateの詳細を見る

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

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

positionプロパティは、要素の配置を指定するプロパティです。positionプロパティの初期値はstaticで、fixedは要素位置を固定することができます。

基本書式は次のようになります。

基本書式

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

position のfixedを指定すると通常配置から浮く

要素にpositonの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クラス要素はfixedによって浮いたような状態になり、pタグのテキストが上に詰まります。

fixedクラスにopacitiyを適用すると、fixedクラス要素の裏側にあるテキストが見えるようになります。opacitiy: 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クラス要素が半透明になったことにより、後ろにあるテキストが見えるようになりました。

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; とセットで使うtop・bottom・left・right

fixedクラス要素の位置を変更する場合は、top, left などに値を設定して位置を指定することができます。例えば、top: 0; なら基準位置が画面一番上、left: 0; なら基準位置が画面一番左となります。

例えば、top, left（right, bottomでも可）の値を次のように指定します。

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

出力結果

See the Pen positon-fixed-位置指定 by ZeroPlus (@zeroplus-programming) on CodePen.

fixedがテキスト下部に配置されました。top, leftに値を設定したため、下記の画像のようにその値に合わせて要素が配置されます。

配置のイメージは、次の画像のようにイメージしてみるといいでしょう。

positionは単体で使用せずに、top, left, right, bottomなどを使って配置を指定しましょう。

z-indexで重なり順を変更

positionプロパティはstaticを除いて、重なり順を指定するz-indexプロパティを指定することができます。

下記のコードでは、z-indexを適用していない状態で、fixedクラスの要素がcontentsクラスの要素の上側に重なっています。これはpositionプロパティを適用していない要素（contentsクラス）の上に、positionプロパティを適用した要素（fixedクラス）が配置されるためです。

<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クラスの要素をcontentsクラスの要素の裏側に配置する場合は、次のような記述になります。

.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クラス要素の裏側に配置されました。z-indexは、値の数字が大きいほど前に、小さいほど後ろに配置されます。

position: fixed; の使い所3選

positionのfixedを使う場面は、主に次の３つです。

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

一つずつ紹介していきます。

fixed でヘッダーを固定する

position: fixed; を使って、ヘッダーを追従させることができます。Webページが縦に長い場合、ヘッダーを追従させることで、下層ページへの導線をいつでもユーザーの目に入る状態にしておくことができます。

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ページのトップ（ヘッダーやファーストビューがあるエリア）に移動するボタンのことです。

要素を浮いたように固定できるfixedの性質を利用して、ページトップに戻るボタンを配置することができます。

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タグで作成し、矢印部分は下記コード部分で疑似要素で作成しています。矢印はborder-topとborder-rightプロパティで表現し、それをtransformプロパティで回転・位置調整しています。

.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%; 
}

aタグのhref属性は空の状態でクリックすると、ページのトップに戻ります。なお、この状態でクリックすると一瞬でトップに戻りますが、JavaScriptと併用すれば時間をかけてトップに戻る動きを実装することができます。

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

fixed を使って、フッターを画面下部に固定することができます。フッターにメニューボタンを配置することで、ユーザーをWebサイトページ内のCVポイントに移動させたり、別のWebページに誘導したりすることができます。

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サイト内の閲覧性がより高まります。

position: sticky; との違い

position: fixed; とposition: sticky; のどちらも、要素が追従するという意味では似ています。この2つの違いは、簡単にいうと次のとおりです。

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.

sticky の場合、親要素のcontainer要素の中でのみ追従する動きを見せています。fixedは親要素のcontainer要素を飛び越えて追従しています。

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

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

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

z-indexが負けている

positionプロパティはz-indexで重なり順を指定することができます。z-indexは数字が大きいほど前に表示されます。

まずはfixedを適用している要素が、他のpositionプロパティで適用しているz-indexと数字で負けていないか確認してみてください。0以下の数字（マイナスの数字）を適用している場合にも、前に表示されないことがあります。

z-indexの数字が負けている場合は、値を調整してみましょう。

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

position: fixed; を適用している要素の親要素・先祖要素に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以外にもperspective、filterのプロパティが指定されていても同様の事象が発生します。

対処法としては親要素や先祖要素にtransformやperspective、filterプロパティを使わない方法で実装することです。

親要素のtransformプロパティを外せない場合は、fixedを適用した要素を、その親要素の外側に配置してあげましょう。例えば上記のコードであれば、下記のように書き換えます。

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

ヘッダーの親要素containerのtransformプロパティが外せない場合、container要素の外側にヘッダーを配置させます。この配置なら、fixedの追従が効くようになります。

fixedを適用している要素に、heightを%で適用している

position: fixed;を適用した要素にheightを%指定している場合は、その要素の高さが画面全体の高さになってしまいます。fixedが指定された要素は、基準位置が画面全体になるので、要素の高さが画面全体の高さに合わせて大きくなります。

<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の高さを%ではなくpx単位で指定するようにしましょう。