2019年11月21日

z-indexを使用する時に注意ことはたった3つだけ!

z-indexを使用する時に注意ことはたった3つだけ!

「z-index」を使用する時に注意することは3つだけで大丈夫!

お世話になっております。佐藤です。
今回はz-indexについて解説していこうと思います。

z-indexは結構奥が深いプロパティで完璧に理解することはなかなか難しいです。スタック文脈(stacking contexts)スタックレベル(stack level)という概念がありこれを理解することが必須になります。

しかし、こんなに難しい概念を理解しなくても私の経験上、以下の3点を理解しておけば大抵の場合困ることはありません。実際の案件でこれから話す3点で解決出来なかった案件はよっぽど特別な時でした。

  • 「z-index」を指定する要素には「relative」か「absolute」を指定する
  • 親子関係を確認する
  • transformを指定した要素には再度「z-index」を指定する

HTML

<div class="box1">
  <div class="box1-1"></div>
  <div class="box1-2"></div>
</div>
<div class="box2">
  <div class="box2-1"></div>
  <div class="box2-2"></div>
</div>

共通CSS (width,hight,top,leftは省略)

.box1 {
  background: #000;
  position: absolute;
}
.box1-1 {
  background: blue;
  position: absolute;
}
.box1-2 {
  background: lightblue;
  position: absolute;
}
.box2 {
  background: red;
  position: absolute;
}
.box2-1 {
  background: green;
  position: absolute;
}
.box2-2 {
  background: lightgreen;
  position: absolute;
}

「z-index」を指定する要素には「relative」か「absolute」を指定する

「z-index」を指定する要素には「relative」か「absolute」を指定する
黒:box1 / 赤:box2

z-indexの初期値は「static」になっています。しかし、「static」を指定している要素にはz-indexは効かないようになっておりので、「relative」か「absolute」を指定しましょう。

親子関係を確認する

要素の親子関係には注意しましょう。以下の例をご覧ください。

CSS

.box1 {
  z-index:2;
}
.box1-1 {
  z-index:1;
}
.box1-2 {
  z-index:2;
}

.box2 {
  z-index:1;
}
.box2-1 {
  z-index:3;
.box2-2 {
  z-index:4;
}

.box-1に「z-index:2」、.box-2に「z-index:1」を指定

黒:box1 / 赤:box2 / 青:box1-1 / 水色:box-1-2

.box1に「z-index」をして、.box2-1を上に配置したいとしても.box2が.box1よりもz-indexが小さければ子要素が上に配置されることはありません。イメージ的には以下のような感じになります。

box12
box21
box2-11.3
box2-21.4

なので、box2の子要素を上に配置したい場合はbox1よりもboxを上に配置する必要があります。今回は単純の例なので問題ないですがコーディングを行っていると迷うことがありますので注意が必要です。

transformを指定した要素には再度「z-index」を指定する

transformで要素を変形させたり、移動させた要素には「z-index」がリセットされます。その場合は直接再度「z-index」をセットしてみて下さい。

z-indexの使用は以上の3つの点を抑えれば怖くない

いかがでしょうか?「z-index」は奥が深いプロパティですが、上記の3点だけで基本的には問題ありません。私も以上の3つだけを意識しています。どうしてもこれで解決出来ない場合のみネットで調べています。(ほとんどありません。)