z-index

CSSでは、要素が重なった時に表示する順番を指定することができます。

本ページでは、z-indexプロパティについて説明します。

z-indexプロパティとは

z-indexプロパティは、要素が重なった時に表示する順番を指定します。例えば、3つの要素が一部重なる時、前に記述した要素は後ろに隠れて表示されなくなりますが、順番を変えて表示するようにできます。

要素1の上に要素2、要素2の上に要素3が表示されていますが、順番を変えて要素3の上に要素2、要素2の上に要素1を表示させることができます。

z-indexの定義は、以下のとおりです。

【z-indexの定義】
auto | integer | inherit
初期値 auto
適用対象 positionがstatic以外の要素
継承 しない

値の説明

以下は、z-indexで使える値と説明です。

auto
現在の順番から変えません。
integer
優先順位を整数で指定します。数字が大きいほど、前に表示されます。負の値も可能で、優先順位が下がります。

利用例

z-indexの利用例を示すために、以下のHTMLを使います。

【z-indexの利用例を示すためのHTML】
<div class="test">
<p>春になると木漏れ日が差し、草花は土の中から顔を出します。</p>
<p>夏になると、太陽は草花に喜びを与えます。</p>
<p>秋になると、草花は実をなして恵を与えます。</p>
</div>

まずは、z-indexを使わない場合の表示例を示すため、以下のCSSを使います。

【z-indexを使わない場合のCSS】
.test {
  position: relative;
}

.test p:nth-child(n) {
  width: 250px;
  position: absolute;
  top: 0;
  border: solid;
}

.test p:nth-child(1) {
  left: 0px;
  background-color: lightgreen;
}

.test p:nth-child(2) {
  left: 100px;
  background-color: lightblue;
}

.test p:nth-child(3) {
  left: 200px;
  background-color: orange;
}

positiontopleftで表示が重なるようにしています。

上記は、以下のように表示されます。

1段落目は、右側が2段落目と3段落目の後ろになって隠れています。2段落名は、右側が3段落目の後ろになって隠れています。3段落目は、隠れていません。

3段落目が一番前に表示されていて、1段落目と2段落目は一部が隠れています。後に記述した段落の方が、手前に表示されるためです。

CSSを以下に変えたとします。

【z-indexを使った場合のCSS】
.test {
  position: relative;
}

.test p:nth-child(n) {
  width: 250px;
  position: absolute;
  top: 0;
  border: solid;
}

.test p:nth-child(1) {
  left: 0px;
  background-color: lightgreen;
  z-index: 3;
}

.test p:nth-child(2) {
  left: 100px;
  background-color: lightblue;
  z-index: 2;
}

.test p:nth-child(3) {
  left: 200px;
  background-color: orange;
  z-index: 1;
}

上記は、以下のように表示されます。

1段落目は、隠れていません。2段落目は、左側が1段落目の後ろになって隠れています。3段落名は、左側が1段落目と2段落目の後ろになって隠れています。

順番が逆になって、1段落目が一番前に表示されていて、2段落目と3段落目は一部が隠れています。これは、z-indexの値が大きいほど、手前に表示されるためです。

JavaScriptでの利用例

以下のように、各ボックスを切り替えるJavaScriptもできます。

答え:100
答え:200

ボックス2のボタンをクリックすると、答え:200が表示されます。これは、z-indexプロパティの値を変更して、順番を変えて表示しています。

CSSは、以下のとおりです。

【z-indexの値を変えるCSS】
.test1 {
  position:relative;
  border:solid;
  height:2em;
}

.test2 {
  position:absolute;
  z-index:2;
  background-color:lightblue;
}

.test3 {
  position:absolute;
  z-index:1;
  background-color:lightgreen;
}

HTMLとJavaScriptは、以下のとおりです。

【z-indexの値を変えるJavaScript】
<input type="button" value="ボックス1" id="test1">
<input type="button" value="ボックス2" id="test2">
<div class="test1">
<div class="test2">答え:100</div>
<div class="test3" id="test3">答え:200</div>
</div>

<script>
function func1(){
  z.style.zIndex = 1;
}
function func2(){
  z.style.zIndex = 3;
}

const x = document.querySelector("#test1");
x.addEventListener("click",func1);
const y = document.querySelector("#test2");
y.addEventListener("click",func2);
const z = document.querySelector("#test3")
</script>

z.style.zIndexが、z-indexプロパティの値を変更している部分です。どちらかのボタンがクリックされると、idがtest3側(答え:200の方)の優先度を変更して、表示順番を変えています。

ブラウザのサポート状況

各ブラウザの最新バージョンでのサポート状況は、以下のとおりです。

【パソコン】
項目 IE Ed Fx Ch Sa Op
z-index
【スマートフォン】
項目 Sa An Op Ch Fx Sm
z-index
サポート
制限あり
×
未サポート
不明
IE
Internet Explorer
Ed
Edge
Fx
Firefox
Ch
Chrome
Sa
Safari
Op
Opera
An
Android Browser
Sm
Samsung Internet

※スマートフォンのFirefoxとChromeは、Android版です。

CSSプロパティ一覧」に戻る