ZeroPlus Media > Web制作 > HTML/CSS > 【CSS】z-indexの使い方を徹底解説！効かないときの原因は4つ

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

HTML/CSS

2024/12/13

2025/01/25

本記事では要素の重なり順を指定するためのCSSプロパティ「z-index」の使い方を紹介します。z-indexを指定しても、意図したとおりに要素が重ならないときの原因についても紹介しているため、ぜひ参考にしてみてください。

この記事で身につく内容

z-indexの基本的な使い方がわかる
z-indexがうまく効かないときの原因がわかる

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

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

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

公式サイトを見る

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

z-indexは要素の重なり順を数値で指定するプロパティ
z-indexの使い方
- 基本はpositionとセットで使う
z-indexがうまく効かないときの原因4選
まとめ

z-indexは要素の重なり順を数値で指定するプロパティ

z-indexは要素の重なり順を指定するCSSプロパティです。

指定方法はz-index: 数値;の形式で書きます。数値の大きな要素ほど前面に表示され、数値の小さな要素ほど背面に表示されるのが数値の基本です。

z-indexに指定する数値は、スタックレベルと呼ばれることもあります。

スタックレベルのルールを以下にまとめますので、確認しておきましょう。

数値が大きい要素ほど前面に表示され、数値の小さい要素ほど背面に配置される
数値の最大値は2147483647、最小値は-2147483647
マイナスの値も指定できる
整数で指定する（小数は指定できない）

無料だけど、専任メンターがつく。学習に迷わない！

ZeroPlus Gateの詳細を見る

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

z-indexの使い方

この章ではz-indexの使い方を解説します。

基本はpositionとセットで使う

z-indexはpositionプロパティとセットで使用されるケースが一般的です。position: absolute; や position: fixed; などを使用する際に、要素が重なり合う箇所で活用できます。

z-indexの使用方法を具体例を使って解説します。まずはz-index適用前のコードと表示結果をご覧ください。

<div class="container">
  <div class="box box1">box1</div>
  <div class="box box2">box2</div>
  <div class="box box3">box3</div>
</div>

.container {
  position: relative;
  width: 300px;
  height: 300px;
  background: #f0f0f0;
}

.box {
  position: absolute;
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
  color: black;
  font-weight: bold;
}

.box1 {
  top: 0;
  left: 0;
  background: lightblue;
}

.box2 {
  top: 20px;
  left: 20px;
  background: coral;
}

.box3 {
  top: 40px;
  left: 40px;
  background: lightgreen;
}

表示結果

このようにz-indexを指定しない場合には、HTMLで記述した順に要素が重なります。

ここでは先に書くbox1が最背面、後に書くbox3が最前面といった具合です。次にz-indexを適用させてみます。

.box1 {
  top: 0;
  left: 0;
  background: lightblue;
  z-index: 30; /* 最前面 */
}

.box2 {
  top: 20px;
  left: 20px;
  background: coral;
  z-index: 20; /* 中間 */
}

.box3 {
  top: 40px;
  left: 40px;
  background: lightgreen;
  z-index: 10; /* 最背面 */
}

表示結果

このようにpositionとz-indexをセットで使うことにより、重なり順を指定できました。

ただしpositionプロパティの値にstatic（初期値）が指定されている場合、z-indexは効かないため注意しましょう。

参考記事

【CSS】position プロパティまとめと効かないときの対処法を解説 | ZeroPlus Media

z-indexがうまく効かないときの原因4選

この章ではz-indexがうまく効かないときに考えられる原因を4種類紹介します。

数値に小数が指定されている
positionの記述を忘れている
スタックコンテキストが考慮されていない
z-indexの初期値が 0であると認識してしまっている

かめるん先生

個人的に一番よくみているのは、positionプロパティの記述漏れですね！効かない！となったときは一緒に指定しているのかみてみましょう！

数値に小数が指定されている

z-indexは整数のみを値に指定できるプロパティのため、小数を指定してもうまく効きません。他のCSSプロパティでは小数を使える場合が多いため、z-indexでも小数を指定してしまうケースはよくあります。

z-indexが効かないときは、値に整数が指定されているかを確認しましょう。

positionの記述を忘れている

z-indexを正しく効かせるためには、対象の要素にpositionを指定する必要があります。positionを指定しない場合、z-indexの指定は効きません。

以下は、positionを指定していないために z-index が効かない例です。

<div class="container">
　<div class="box box1">box1</div>
  <div class="box box2">box2</div>
  <div class="box box3">box3</div>
</div>

.container {
  position: relative;
  width: 300px;
  height: 300px;
  background: #f0f0f0;
}

.box {
  width: 100px;
  height: 100px;
  text-align: center;
  line-height: 100px;
  font-weight: bold;
}

.box1 {
  z-index: 30; /* positionが指定されていないため無効 */
  top: 0;
  left: 0;
  background: lightblue;
}

.box2 {
  position: absolute; /* z-indexが有効になる */
  top: 20px;
  left: 20px;
  z-index: 20;
  background: coral;
}

.box3 {
  osition: absolute; /* z-indexが有効になる */
  z-index: 10;
  top: 40px;
  left: 40px;
  background: lightgreen;
}

box1 にz-index: 30; を指定していますが、position が指定されていないため、 z-index が機能していません。

対処法としてはbox1にpositionを指定すれば、意図した重なり順が実現します。

.box1 {
   position: absolute;
   z-index: 30; /* positionが指定されていないため無効 */
   top: 0;
   left: 0;
   background: lightblue;
 }

z-indexが効かないときは、positionが要素に指定されているかを確認しましょう。

30日間でHTML/CSSが身に付く無料プログラミングスクール

ZeroPlus Gateの詳細を見る

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

スタックコンテキストが考慮されていない

z-indexを指定したのに、思ったとおりに要素が前後しない原因は「スタックコンテキスト」を理解していないことにあるかもしれません。

スタックコンテキストは難解な概念であるうえに、理解しなくてもある程度z-indexは使えます。

しかし、スタックコンテキストが考慮されていないことでうまく重なり順をコントロールできないケースがあるのも事実です。そこで次からは、スタックコンテキストについて解説します。

かめるん先生

最初は理解するのが難しいかなと思いますので、原因調査の一番最後にやるといいと思います！

スタックコンテキストは要素の重なり順を管理するグループ

スタックコンテキストとは、要素の重なり順を管理するグループのことです。異なるスタックコンテキストに属する要素同士は、z-indexの数値で大小によって重なり順を制御できなくなります。

スタックコンテキストを形成するためには、以下の条件が必要です。

要素にpositionがrelative, absolute, fixed のいずれかの値が指定されていること

要素にz-index が指定されていること

この条件がそろった親要素はスタッキングコンテキストの作成者となり、その子要素がグループに属します。

以下のコードをご覧ください。

 <div class="container">
  <div class="box box1">box1</div>
  <div class="box box2">box2</div>
  <div class="box box3">box3</div>
 </div>

.container {
  position: relative;
  z-index: 0;/*スタックコンテキストを形成*/
  width: 300px;
  height: 300px;
  background: #f0f0f0;
}

.box {
  width: 100px;
  height: 100px;
  text-align: center;
  line-height: 100px;
  font-weight: bold;
}

.box1 {
  position: absolute;
  z-index: -10;
  top: 0;
  left: 0;
  background: lightblue;
}

.box2 {
  position: absolute;
  z-index: 20;
  top: 20px;
  left: 20px;
  background: coral;
}

.box3 {
  position: absolute;
  z-index: 30;
  top: 40px;
  left: 40px;
  background: lightgreen;
}

表示結果

上の例ではposition: relative;と z-index: 0;の指定により、親要素であるcontainer がスタックコンテキストを形成して、子要素である box1〜3 が同じグループに属しています。

これにより3つの子要素は、container によって作られたスタックコンテキスト内でスタックレベルの大小に基づき、重なり順が決定されます。

上のようにz-index: 30;（box3）が最前面、次に z-index: 20;（box2）、最後に z-index: -10;（box1）の順で重なっています。

ここで注目したいのは親要素のcontainerはz-index: 0;に対し、box1がz-index: -10;なのにもかかわらず、box1の方が前面にある点です。

z-indexの原則に基づくなら、containerのほうが前面に重なりそうですが、実際にはbox1の方が前面です。

このようにz-indexの数値通りにならない場合、それぞれ要素が異なるスタックコンテキストにグルーピングされている可能性があります。

前述したとおり、box1〜3はcontainerによって作られたスタックコンテキストに属しています。

これに対しcontainer自体は、自分が作ったスタックコンテキストに属するわけでありません。サイト全体が作り出す大元のスタックコンテキストである、ルートコンテキストに属しています。

このように別のスタックコンテキストにグループ化されるため、重なり順が数値どおりにならない場合があります。

かめるん先生

要は、大元のz-indexが低かったら、その上にどれだけz-indexを重ねても重なり順は変わらないよ。という意味になります！

z-indexの初期値が 0であると認識してしまっている

z-indexの初期値がz-index: 0;であると認識していると、思うように重なり順を指定できないことがあります。実際にはz-indexの初期値はautoです。

z-index: 0;とz-index: auto;は似たような挙動をするため混同されがちですが、両者には大きな違いがあります。z-index: auto;が指定されている場合、スタックコンテキストが作成されない点です。

再びスタックコンテキストを形成するための条件を確認しましょう。

要素に position が relative, absolute, fixed のいずれかで指定されていること。
要素に z-index が指定されていること。

z-indexが指定されていない状態である、初期値autoの場合には、スタックコンテキストは形成されません。これにより重なり順に影響を及ぼす場合があるため、事例を使って解説します。

まずcontainerにz-index: 0;を指定します。この場合、containerのスタックコンテキストが形成されます。

.container {
  position: relative;
  z-index: 0;/*スタックコンテキストを形成*/
  width: 300px;
  height: 300px;
  background: #f0f0f0;
}

.box {
  width: 100px;
  height: 100px;
  text-align: center;
  line-height: 100px;
  font-weight: bold;
}

.box1 {
  position: absolute;
  z-index: -10;
  top: 0;
  left: -10px;
  background: lightblue;
}

.box2 {
  position: absolute;
  z-index: 20;
  top: 20px;
  left: 20px;
  background: coral;
}

.box3 {
  position: absolute;
  z-index: 30;
  top: 40px;
  left: 40px;
  background: lightgreen;
}

表示結果

ここではcontainerはルートコンテキスト、boxA〜Cはcontainerのスタックコンテキストに属します。そのため並び順は以下のようになります。

ここで、containerに指定しているz-index: 0;を削除してみましょう。これによりcontainerに形成されていたスタックコンテキストがなくなります。

container {
  position: relative;
  width: 300px;
  height: 300px;
  background: #f0f0f0;
}

.box {
  width: 100px;
  height: 100px;
  text-align: center;
  line-height: 100px;
  font-weight: bold;
}

.box1 {
  position: absolute;
  z-index: -10;
  top: 0;
  left: -10px; background: lightblue;
}

.box2 {
  position: absolute;
  z-index: 20;
  top: 20px;
  left: 20px;
  background: coral;
}

.box3 {
  position: absolute;
  z-index: 30;
  top: 40px;
  left: 40px;
  background: lightgreen;
}

これによりcontainerとbox1〜3が全てルートコンテキストに属するようになりました。そのため親子要素に関係なく全ての要素が数値順に並ぶようになっています。

この場合boxAをcontainerの手前に表示させるならば、boxAのz-indexを1以上に指定するか、containerのz-indexに何らかの数値を指定する必要があります。

ちなみにboxAにz-index: 0;を指定してもこの場合は、boxAがcontainerの前に重なります。

ただ同じスタックコンテキストの中に、z-index: 0;とz-index: auto;が共存する場合、HTMLで後に書かれた要素が前に出るように重なるため注意が必要です。一方、z-index: 1;以上の数値が入力されている場合、HTMLの記述順には関係なく、z-index: auto;が裏面に回るように重なります。

このようにz-index: 0;とz-index: auto;とで挙動が異なる場合がある点をしっかり押さえておくと、要素の重なりを制御するうえで役立ちます。