要素の重なりの順序を指定するz-index。
意味や役割はなんとなくわかるけど、正しい使い方を知らない人も多いでしょう。
・正しい使い方がいまいちわからない。
・z-indexを指定できる値は？
こんな疑問を持っていませんか？
今回は、z-indexの
・positionとの関係
・z-indexを指定できる値
について説明します。
目次
z-indexとは
z-indexとはどういったプロパティなのか、詳しく知らない初心者の人もいるでしょう。
なのでここでは、z-indexの意味や役割について解説していきます。
z-indexの読み方
z-indexは「ゼット・インデックス」と読みます。
「index」には「物価指数・データの配列・指針」などといった意味がありますが、CSSでは「重なりの順序」という意味を表します。
例えば、要素同士が重なって、それらの重なりの順序を調整したいときに使われることが多いです。
z-indexは要素の重なりの順序を指定するプロパティ
z-indexは「要素の重なりの順序を指定するプロパティ」です。
z-indexで数値を指定することによって、要素の重なりの順序を調整することができます。
例えば、2つの要素が重なっていたとして、1つの要素にz-index:10を、もう1つの要素にz-index:20を指定した場合、20を指定した要素の方が上に表示されます。
実際のサイト制作では、positionで要素の位置を変更した際に、要素の重なりを調整するためによく使われます。
z-indexで利用できる値
z-indexでは以下の値を使うことができます。
| 値 | 説明 |
|---|---|
| auto | ボックスはローカルな重ね合わせコンテキストを新たに作りません。現在の重ね合わせコンテキストで作られたボックスは、親ボックスと同じ重ね合わせレベルを持ちます。 |
| integer | この整数値は、現在の重ね合わせコンテキストで作られたボックスの重ね合わせレベルです。ボックスは重ね合わせレベル0のローカルの重ね合わせコンテキストを作ります。これは、子孫要素のz-indexは、この要素の外部にある要素のz-indexとは比較されないということです。 |
対応ブラウザ
対応ブラウザは以下の通りです。
| PC用ブラウザ | 対応状況 |
|---|---|
| Chrome | 完全対応 |
| Edge | 完全対応 |
| Firefox | 完全対応 |
| Internet Explorer | 完全対応 |
| Opera | 完全対応 |
| Safari | 完全対応 |
| スマートフォン用ブラウザ | 対応状況 |
| Android webview | 完全対応 |
| Android版Chrome | 完全対応 |
| Android版Firefox | 完全対応 |
| Android 版 Opera | 完全対応 |
| iOS版Safari | 完全対応 |
| Samsung Internet | 完全対応 |
z-indexの基本的な使い方
z-indexの意味や役割がわかりました。
なのでここでは、実際にz-indexの使い方について解説していきます。
使い方をまだ知らない人は、しっかりと理解しましょう。
z-indexの使い方
z-indexの使い方をコードを用いて見ていきます。
実際のコードは次の通り。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
<html lang="ja"> <head> <title>サンプルページ</title> </head> <style media="screen"> div { position: relative; } .one, .two, .three { width: 100px; height: 100px; position: absolute; } .one { background-color: lightblue; top: 0; left: 0; } .two { background-color: lightyellow; top: 50px; left: 50px; } .three { background-color: pink; top: 100px; left: 100px; } </style> <body> <div> <p class="one">要素①</p> <p class="two">要素②</p> <p class="three">要素③</p> </div> </body> </html> |
①divタグの中に3つのpタグを用意します。
②親要素であるdivタグに「position: relative;」を、子要素であるpタグに「position: absolute;」を指定し、要素を重ねます。
③pタグのクラス名をそれぞれ「one」「two」「three」とし、topとleftの値を指定します。
※要素同士の重なりが見やすいように、それぞれのpタグに背景色を指定しています。
z-indexを指定しなければ、上記のように表示されます。
後に書かれた要素が、順番に上に重なっているのがわかりますね。
では、この3つのpタグにz-indexを指定してみましょう。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
<html lang="ja"> <head> <title>サンプルページ</title> </head> <style media="screen"> div { position: relative; } .one, .two, .three { width: 100px; height: 100px; position: absolute; } .one { background-color: lightblue; top: 0; left: 0; z-index: 100; } .two { background-color: lightyellow; top: 50px; left: 50px; z-index: 50; } .three { background-color: pink; top: 100px; left: 100px; z-index: 0; } </style> <body> <div> <p class="one">要素①</p> <p class="two">要素②</p> <p class="three">要素③</p> </div> </body> </html> |
今回は、oneに「z-index: 100;」、twoに「z-index: 50;」、threeに「z-index: 0;」と指定してみました。
すると結果は次のようになります。
先程の結果とは異なり、oneが一番上に表示され、threeが一番下に表示されていますね。
指定した数値が大きければ、その分上に表示されているのがわかります。
このようにz-indexを指定して、要素の重なりの順番を調整することが可能です。
なので、使い方を覚えておくといいでしょう。
z-indexとpositionの関係
z-indexを指定する際は、要素にpositionを指定されていることが多いです。
なのでここでは、z-indexとpositionの関係、そしてpositionの使い方を解説していきます。
positionは、要素の基準位置を相対位置なのか、絶対位置なのかを指定するプロパティです。
positionで指定できる値は、主に次の5つになります。
- ・static：初期値。（配置指定なし）
- ・relative：相対位置への配置
- ・absolute：絶対位置への配置。親要素を基準とした位置になる
- ・fixed：絶対位置への配置。スクロールしても固定されたままになる
- ・sticky：relativeのように位置が配置され、画面に固定される
特に、absoluteやfixedを指定されている場合に、z-indexを用いることが多いです。
実際にpositionの使い方をコードを用いて解説します。
今回は、よく使われるabsoluteとfixedの使い方を見ていきましょう。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
<html lang="ja"> <head> <title>サンプルページ</title> </head> <style media="screen"> div { position: relative; width: 500px; height: 500px; background-color: lightblue; } p { background-color: lightyellow; width: 100px; height: 100px; margin: 0; position: absolute; top: 0; left: 0; } </style> <body> <div> <p>要素</p> </div> </body> </html> |
divタグの中にpタグがあったとします。
親要素であるdivタグに「position: relative;」、子要素であるpタグに「position: absolute;」と指定します。
そして、pタグに「top: 0;」「left: 0;」と指定しましょう。
結果は次のようになります。
子要素のpタグは親要素のdivタグの左上に表示されていますね。
このようにabsoluteを指定すれば、親要素に合わせて配置位置を変えることができます。
では、今度は「position: fixed;」と指定してみましょう。
結果は次のようになります。
fixedを指定すると、画面に合わせて配置位置が調整されます。
今回、pタグに「top: 0;」「left: 0;」と指定しているので、画面の左上に表示されています。
さらに、この画面をスクロールしてみると、pタグは画面左上に固定されたままになっているのがわかりますね。
このように、fixedは要素を一定の場所に固定することが可能です。
absoluteとfixedはよく使われる値なので、使い方を覚えておきましょう。
z-indexを指定できる値
ここまでで、z-indexの基本的な使い方がわかりました。
なのでここからは、z-indexを指定できる値について解説していきます。
z-indexで指定できる最小値と最大値
z-indexは好きな数値を指定することができますが、最小値と最大値が決められています。
・最大値：2147483647
z-indexで指定できる最小値は、-2147483647で最大値は2147483647となっています。
2147483647は符号付き32bit整数の最大値であり、z-indexでこれより大きい数値を指定することはできません。
ここまで大きな数値や小さな数値を指定することはないと思いますが、念のため覚えておくといいでしょう。
小数点は指定できない
z-indexでは数値を指定することができますが、小数点を含む数値を指定することはできません。
例えば、10.5などのようなものです。
試しにコードに書いて確認してみましょう。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
<html lang="ja"> <head> <title>サンプルページ</title> </head> <style media="screen"> div { position: relative; } .one, .two, .three { width: 100px; height: 100px; position: absolute; } .one { background-color: lightblue; top: 0; left: 0; z-index: 10.5; } .two { background-color: lightyellow; top: 50px; left: 50px; z-index: 5; } .three { background-color: pink; top: 100px; left: 100px; z-index: 0; } </style> <body> <div> <p class="one">要素①</p> <p class="two">要素②</p> <p class="three">要素③</p> </div> </body> </html> |
3つあるpタグに、それぞれz-indexを10.5、5、0と指定します。
本来なら10.5が最も大きな数値なので、一番上に表示されるはずです。
結果を表示して確認してみましょう。
10.5と指定したpタグは、5と指定したpタグよりも下に表示されていますね。
このことから、z-indexの数値に小数点を指定できないのがわかります。
なので、z-indexで数値を指定する際は、必ず整数で指定するようにしましょう。
まとめ
今回は、z-indexの意味や使い方について詳しく解説しました。
z-indexは要素の重なりの順序を指定するプロパティです。
positionで要素の位置を変更した際に、それぞれの要素の重なりを調整することができます。
実際のサイト制作でもよく使われるプロパティなので、使い方を覚えておきましょう。
この記事がz-indexの学習に役立つと幸いです。
参考文献：MDN web docs｜z-index – CSS：カスケーディングスタイルシート
