z-indexの使い方：CSSで重なり順を指定する

記事内に商品プロモーションが含まれる場合があります

今回は、要素の重なり順を指定するCSSプロパティz-indexについて、分かりやすく解説します。

1. CSSのz-indexとは？

z-indexは要素の重なり順を指定するCSSのプロパティです。

.example {
  position: relative;
  z-index: 10;
}

この例の.exampleはclass="example"の要素を選ぶclassセレクタです。通常のブロック要素にposition: relativeとz-index: 10を指定しています。

同じ積層コンテキストでは数字の大きい方が上に

z-indexに指定した整数が大きい要素ほど、同じ積層コンテキスト（重なり順をまとめて扱う範囲）の中では前面に表示されます。親が作る積層コンテキストの外にある要素とは、子の数字だけを比べて順番を変えられません。この図は同じ範囲にある2つの要素の例です。

どんなときに使う？

position: absoluteやposition: fixedにより要素が重なっているときに使うことが多いですね。「要素が重なるときに使うもの」と理解しておけば良いでしょう。 absoluteとfixedとは？

z-indexの使用例

例として３つの重なった要素を作って、その順を指定してみます。まずは3つともposition: absoluteで重ね、z-indexは指定しません。コピーコードには、公開当時に省略されていた色・寸法・親の高さ・段落の余白を補っています。5例とも同じHTMLを使い、コピーしたCSSと動く見本は同じ内容です。旧画像は公開当時の参照図として残します。

HTML

<div class="z-index-example">
  <p class="one">1番目</p>
  <p class="two">2番目</p>
  <p class="three">3番目</p>
</div>

CSS

.z-index-example {
  position: relative;
  width: 160px;
  height: 100px;
}

.z-index-example > p {
  box-sizing: border-box;
  width: 60px;
  height: 30px;
  margin: 0;
  padding: 0;
  color: #000;
  font: 20px/30px sans-serif;
}

.z-index-example > .one {
  position: absolute;
  left: 0px;
  top: 0px;
  background: #febd5f;
}

.z-index-example > .two {
  position: absolute;
  left: 20px;
  top: 20px;
  background: #f67c5d;
}

.z-index-example > .three {
  position: absolute;
  left: 40px;
  top: 40px;
  background: #5fb1f8;
}

ブラウザ表示（動く見本）

この例のように同じ積層コンテキストで3つともabsolute、z-index: autoの場合は、HTMLで後ろに書かれた要素が前面に重なります。

z-indexを指定すると…

この重なり順をz-indexで変えてみましょう。1番目の要素には30、2番目には20、3番目には10と指定してみます。

HTML

<div class="z-index-example">
  <p class="one">1番目</p>
  <p class="two">2番目</p>
  <p class="three">3番目</p>
</div>

CSS

.z-index-example {
  position: relative;
  width: 160px;
  height: 100px;
}

.z-index-example > p {
  box-sizing: border-box;
  width: 60px;
  height: 30px;
  margin: 0;
  padding: 0;
  color: #000;
  font: 20px/30px sans-serif;
}

.z-index-example > .one {
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: 30;
  background: #febd5f;
}

.z-index-example > .two {
  position: absolute;
  left: 20px;
  top: 20px;
  z-index: 20;
  background: #f67c5d;
}

.z-index-example > .three {
  position: absolute;
  left: 40px;
  top: 40px;
  z-index: 10;
  background: #5fb1f8;
}

ブラウザ表示（動く見本）

この例では、z-indexの値が大きい要素ほど前面に配置されました。同じ積層コンテキスト内の重なり順を変え、隠れていた1番目の要素を上に持ってくることができました。

2. z-indexが効かないときの対処法

通常のブロック要素ではposition: staticだと効かない

通常フローのブロック要素では、positionが初期値のstaticだとz-indexを指定しても重なり順に効きません。「効かない！」というときは、まずこの条件を確認しましょう。ただしFlexboxやGridのitemでは、staticでもauto以外のz-indexが有効です。以下はFlexboxやGridを使わない通常のブロック要素の例です。

効かない例

実際に例を見てみましょう。さきほどと同じように１〜３番の要素を作ります。１番目の要素に対してはpositionを何も指定しておらず、初期値のstaticとなっています。

HTML

<div class="z-index-example">
  <p class="one">1番目</p>
  <p class="two">2番目</p>
  <p class="three">3番目</p>
</div>

CSS

.z-index-example {
  position: relative;
  width: 160px;
  height: 100px;
}

.z-index-example > p {
  box-sizing: border-box;
  width: 60px;
  height: 30px;
  margin: 0;
  padding: 0;
  color: #000;
  font: 20px/30px sans-serif;
}

.z-index-example > .one {
  background: #febd5f;
}

.z-index-example > .two {
  position: absolute;
  left: 20px;
  top: 20px;
  background: #f67c5d;
}

.z-index-example > .three {
  position: absolute;
  left: 40px;
  top: 40px;
  background: #5fb1f8;
}

ブラウザ表示（動く見本）

z-indexを指定しても…

staticの１番目の要素に対してz-indexを指定してみます。

HTML

<div class="z-index-example">
  <p class="one">1番目</p>
  <p class="two">2番目</p>
  <p class="three">3番目</p>
</div>

CSS

.z-index-example {
  position: relative;
  width: 160px;
  height: 100px;
}

.z-index-example > p {
  box-sizing: border-box;
  width: 60px;
  height: 30px;
  margin: 0;
  padding: 0;
  color: #000;
  font: 20px/30px sans-serif;
}

.z-index-example > .one {
  z-index: 30;
  background: #febd5f;
}

.z-index-example > .two {
  position: absolute;
  left: 20px;
  top: 20px;
  z-index: 20;
  background: #f67c5d;
}

.z-index-example > .three {
  position: absolute;
  left: 40px;
  top: 40px;
  z-index: 10;
  background: #5fb1f8;
}

ブラウザ表示（動く見本）

↑この通常のブロック要素の例では、staticの「1番目」に指定したz-index: 30は効かず、「2番目」より背面に残ります。一方でabsoluteの2番目と3番目には指定が効くため、20の赤が10の青より前面になります。旧図の「重なり順が変わらない」は、1番目を前にできないことを指しています。

対処法

この例では、1番目の要素をposition: relativeにするとz-indexが有効になります。offsetを指定しなければ元の位置も保てます。positionedな要素にはrelative、absolute、fixed、stickyがありますが、位置やスクロール時の動きが異なるため目的に合わせて選びましょう。

対処例

HTML

<div class="z-index-example">
  <p class="one">1番目</p>
  <p class="two">2番目</p>
  <p class="three">3番目</p>
</div>

CSS

.z-index-example {
  position: relative;
  width: 160px;
  height: 100px;
}

.z-index-example > p {
  box-sizing: border-box;
  width: 60px;
  height: 30px;
  margin: 0;
  padding: 0;
  color: #000;
  font: 20px/30px sans-serif;
}

.z-index-example > .one {
  position: relative;
  z-index: 30;
  background: #febd5f;
}

.z-index-example > .two {
  position: absolute;
  left: 20px;
  top: 20px;
  z-index: 20;
  background: #f67c5d;
}

.z-index-example > .three {
  position: absolute;
  left: 40px;
  top: 40px;
  z-index: 10;
  background: #5fb1f8;
}

ブラウザ表示（動く見本）

この例では1番目をrelativeにすることで、z-index: 30が有効になり、赤20・青10より前面に配置されます。それでも前に出ない場合は、親などが作る積層コンテキストも確認しましょう。子に大きな数字を付けるだけでは、その親の積層コンテキストを越えられません。

3. z-indexの指定できる値は？

z-indexにはautoまたは整数を指定できます。数字は必要な重なり順が分かる小さい値を使うと管理しやすくなります。

整数：正の数・0・負の数を指定できる
対応範囲：数値として扱える範囲はブラウザの実装による
書き方：数値を直接書くときは整数にし、小数や単位は付けない。autoも有効

初期値はz-index: autoです。0と同じではなく、relativeやabsoluteの要素では整数0が新しい積層コンテキストを作る一方、autoは作りません（fixedやstickyはautoでも作ります）。負の整数も指定でき、同じ積層コンテキスト内の重なり順に影響します。親の背景などとの位置関係にも注意し、「何も指定していない全要素より必ず下」とは考えないでください。