z-index | スタイルシートリファレンス

適用できる要素配置された要素
継承なし
初期値auto

z-indexとは?

CSSのz-indexプロパティはposition: static以外のボックスの重なり順を設定するプロパティです。

z-indexの設定によりどのボックスを前面にするか、背面にするかの調整が可能になります。

z-indexで指定できる値

CSSのz-indexプロパティは初期値はautoでブラウザに設定を委ねる形になりますが、基本は整数で指定します。

整数の値が大きいほど前面に表示されるようになります。

構文

/* 構文 */
z-index : 値 | auto ;

z-indexを使ったサンプルコード

上記のサンプルコードでは、position: absoluteで配置した要素に対してz-indexプロパティを設定し、z-indexプロパティの値で大きいほうが前面に配置されています。

マイナスの値を設定したサンプル

下記のサンプルコードではz-indexプロパティにマイナスの値を設定しています。

負の値はz-indexが0のものよりは後ろになりますが、autoよりは前面となっています。この点に注意しておきましょう。

z-indexのブラウザ対応状況

CSSのz-indexプロパティはほぼ全てのモダンなブラウザで対応しているプロパティです。z-indexプロパティのブラウザ毎の対応状況を知りたい方は下記を確認しましょう。

Can I use... Support tables for HTML5, CSS3, etc

z-indexの関連情報

z-indexが効かない

z-indexプロパティを設定しているつもりでも、実際のブラウザ上の表示でz-indexプロパティが効かないというのはよくあるケースです。その対処法を解説しています。

CSSのz-indexプロパティが効かない場合の対処法!のイメージ
CSSのz-indexプロパティが効かない場合の対処法!
CSSのz-indexプロパティが効かない場合の対処法について解説します。WEBサイトを制作しているときに、CSSのz-indexプロパティが効かないという問題はよく起きます。ここではその問題が起きるケースとその対処法をサンプルコード付きで解説します。

z-indexにマイナスを設定すると消える

z-indexプロパティはマイナスの値も設定することができますが、マイナスの値を設定したときにその要素が消えるという事があります。その対処法を解説しています。

CSSでz-indexにマイナスを設定すると消える場合の対処法!のイメージ
CSSでz-indexにマイナスを設定すると消える場合の対処法!
CSSでz-indexにマイナスを設定すると消える場合の対処法について解説します。z-indexを用いる場合はとある条件が必要となってきます。その条件とは何か、またCSSでz-indexにマイナスを設定すると消える場合どう対処すればいいのかについて解説します。

z-indexプロパティの値の最大値と最小値

z-indexプロパティに指定する数値の最大値と最小値についてどこまでの値が有効なのか検証しています。

CSSのz-indexプロパティの値の最大値と最小値は?のイメージ
CSSのz-indexプロパティの値の最大値と最小値は?
CSSのz-indexプロパティの値の最大値と最小値はいくらかについて紹介します。また最大値と最小値を超えてしまうと実際に効かないのか、最大値と最小値の値は本当なのか、サンプルコードを用いて検証します。