z-index

z-indexプロパティとは

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

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

値の説明

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

auto

現在の順番から変えません。

integer

優先順位を整数で指定します。数字が大きいほど、前に表示されます。負の値も可能で、優先順位が下がります。

利用例

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

<div class="test">
<p>春になると木漏れ日が差し、草花は土の中から顔を出します。</p>
<p>夏になると、太陽は草花に喜びを与えます。</p>
<p>秋になると、草花は実をなして恵を与えます。</p>
</div>

まずは、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;
}

positionやtop、leftで表示が重なるようにしています。

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

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

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段落目と3段落目は一部が隠れています。これは、z-indexの値が大きいほど、手前に表示されるためです。

JavaScriptでの利用例

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

ボックス2のボタンをクリックすると、答え：200が表示されます。これは、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は、以下のとおりです。

<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

Internet Explorer

Ed

Edge

Fx

Firefox

Ch

Chrome

Sa

Safari

Op

Opera

An

Android Browser

Sm

Samsung Internet

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