1. TOP
  2. html&CSS入門
  3. CSSで重なり順を変更!z-indexの使い方解説

CSSで重なり順を変更!z-indexの使い方解説

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

HTMLの要素は特別に指定しない場合、後に書いた要素の方が上に表示されますが、z-indexを使うことで重なり順を変えることができます。

通常のパターン

<div id="demo_143-1" class="box">要素1
   <div id="demo_143-2" class="box">要素2</div>
 </div>
 #demo_143-1{
   width: 250px;
   height: 250px;
   background-color: tomato;
 }
 #demo_143-2{
   width: 100px;
   height: 100px;
   background-color: yellow;
 }
要素1
要素2

後に記述した要素は上に表示されますね。

z-indexを使えば、重なり順を変えることができる

 <div id="demo_144-0">
   <div id="demo_144-1">要素1</div>
   <div id="demo_144-2">要素2</div>
 </div>
 #demo_144-0{
    /*   重ねるための指定 */
   position: relative;
 }
 #demo_144-1{
    /*  重ね順の変更 */
   z-index: 1;
   position: relative;
    /*   装飾 */
   width: 250px;
   height: 250px;
   background-color: tomato;
 }
 #demo_144-2{
   /*   重ねるための指定 */
   position: absolute;
   top: 30px;
   left: 30px;
   /*   装飾 */
   width: 250px;
   height: 250px;
   background-color: yellow;
 }
 
要素1
要素2

要素1が上に表示されていますね。このようにz-indexを使えば重ね順を変更することができます。

z-indexの使い方

z-indexは下記のようにして使います。

z-index: 数字かauto;

以下の値を指定します。

z-indexの値

  • auto
    初期値です。親要素と同じ階層に表示されます。
  • 数値
    重なりの順序を数値で指定します。整数のみが有効で、値が大きいほど上に表示されます。指定されていない要素は「0」の位置にあるので、それより大きくすれば上に、逆にマイナスの値を入れれば、通常の要素より下に配置することもできます。
    「-2147483647」〜「2147483647」の値を指定できます。

非常にシンプルなプロパティですが、注意しなければならない点があります。

それは、z-indexはpositionプロパティがstatic以外の時、つまり「relative、absolute、fixed」に指定されている場合のみ有効になるという点です。

positionに何も指定していない場合は、いくらz-indexを指定しても何も起こらないので注意しましょう。

また、positionが「relative、absolute、fixed」が設定された要素は、初期値のautoが設定された状態になります。

positionについては下記の記事が参考になります。

z-indexが効かないと困ったら

positionが指定されていないと効かない

z-indexを設定しているのに効果がない場合は、まずはpositionが指定されているか確認しましょう。

うっかり指定し忘れていることが多いので確認してみましょう。

スタックコンテキストの関係で効いていないように見える

z-indexはスタックコンテキスト内でしか順序を変えることができません。スタックコンテキストについては、後から詳しく説明します。

スタックコンテキストとスタックレベル

z-indexを指定した要素がどのような順序で表示されるかは、スタックコンテキストとスタックレベルについて理解する必要があります。

重要なポイントは「z-indexで指定した重なり順は、HTML全体の中の重なり順ではなく、所属するスタックコンテキストの中の重なり順」ということです。

スタックコンテキストとスタックレベル

まず下記の例を見てください。

<div id="demo_145-1" class="box">要素1</div>
 <div id="demo_145-2" class="box">要素2
   <div id="demo_145-3" class="box">要素3</div>
 </div>
.box{
   width: 100px;
   height: 100px;
 }
 #demo_145-1{
   position: relative;
   z-index: 1;
  /*   以下装飾 */
   background-color: tomato;
 }
 
 #demo_145-2{
   position: relative;
   z-index: 2;
   /*   以下装飾 */
   background-color: royalblue;
   top: -75px;
   left: 25px;
 }
 
 #demo_145-3{
   position: relative;
   z-index: 0;
   /*   以下装飾 */
   left:25px;
   background-color: yellow;
 }
要素1
要素2
要素3

z-indexの数値だけを見れば、要素3、要素1、要素2、の順で並びそうですが、z-indexが0の要素3が一番上にきています。

なぜこうなるのでしょうか。この理由はスタックコンテキストとスタックレベルおを理解することでわかります。

スタックコンテキスト

スタックコンテキストというのは、ある一定の条件で作られる、「要素をひとまとめにしたグループ」のようなものです。

HTMLはこのグループが積み重なって表示されています。

HTML要素は初期状態でルートスタックコンテキストを生成しているので、全ての要素はルートスタックコンテキストに所属することになります。HTMLの階層によって、その中でさらにスタックコンテキストに所属することになります。

スタックコンテキストが生成される条件は色々ありますが、その中の一つに「positionにstatic以外を設定し、z-indexに数値を指定した場合」というものがあります。z-indexを指定する時はpositionも指定するので、つまるところ、「z-index を指定した要素はスタックコンテキストを生成する」と思ってもらって構いません。

どのスタックコンテキストに所属しているかが大切

スタックコンテキストが生成された場合、子要素があればそのスタックコンテキストに所属することになります。

上記の例では、要素1、要素2、要素3全てがスタックコンテキストを生成していることになりますが、要素1、要素3は子要素がないのでスタックコンテキストは使われません。

つまりスタックコンテキストの所属状況は下記のようになります。

  • 要素1…ルートスタックコンテキストに所属
  • 要素2…ルートスタックコンテキストに所属
  • 要素3…要素2のスタックコンテキストに所属

スタックレベル

スタックコンテキストのなかの重なり順をスタックレベルと呼びます。z-indexで指定している順序は、HTML全体のなかの重なり順ではなく、このスタックレベルのことを指しています。

ですので複数のスタックコンテキストがある場合、数値通りの重なり順にならないことがでてきます。

たとえば前述した例のような場合、要素1と要素2は同じルートスタックコンテキストに所属するので、数値の大きい要素2の方が上にきます。

要素3は要素2のスタックコンテキストになるので、ルートスタックコンテキストより上に配置されます。

よって、表示される順番は下から、要素1、要素2、要素3となるのです。

ちょっと癖がある仕様ですが、思った通りの重ね順にならなかったら、スタックコンテキストを解析してみると良いでしょう。

ちなみに、スタックコンテキストを作成する条件は多数あります。下記のサイトが参考になります。

https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context

まとめ

  • z-indexは要素の重なり順を指定するためのプロパティである
  • z-indexはpositionプロパティがstatic以外でなければ無効になる
  • 重ね順はスタックコンテキストとスタックレベルによって決まる