HTML/CSS
css
html

HTML/CSSで要素の重なりを指定するz-indexの使い方を解説

2021/05/04

( 更新日：2022/04/19 )

HTML/CSSのコードで要素を重ねたいことがあると思います。ヘッダーメニューの固定はその代表例です。しかし、position:fixed;を実装してみても、下の要素と重なり、固定するとうまく表示がされません。

原因として要素同士を重ねる順序を指定していないからです。HTMLの要素を重ねる順序を指定する方法には「z-index」があります。本記事ではz-indexの使い方を解説します。

z-indexはhtml要素の重なり順を変える

z-indexとは

z-indexは要素の重なり順を指定するためのCSSのプロパティです。floatやpositon:fixed;を使う際に要素と要素が重なることがあります。何も指定しなければ、下のコードの元から順に要素が重なっていきます。

もし、一番上の要素を画面の一番前に表示させたい場合、z-indexを使って重なりを指定することが必要です。要素をただ並べていく場合には必要ありませんが、CSSでfloatやpositionの指定を行う際は、必要になるケースが多いです。

z-indexの基本構文

z-indexの基本構文は他のCSSのプロパティと変わりません。z-indexでは値の設定方法が重要によって重なりが変わるので、誤解の内容に覚えておくことが必要です。z-indexの値は数値指定とautoがあります。

数値指定は-2,147,483,647～2,147,483,647までの整数です。小数は使えないので注意してください。数字が小さいほど要素が後ろに、数字が大きいほど要素が前に表示されます。常に一番前に表示させたい場合は大きな数字を指定すればいいと思います。

autoは親要素と同じ位置に指定されます。例えば、親要素を10の位置に指定している場合、autoを使えば同じ10となります。

z-indexの使いどころ

ヘッダーやサイドバーを固定する

z-indexを使うパターンで最も多いのがヘッダーやサイドバーを固定するときだと思います。縦に長いページだとヘッダーを固定することが多いです。その際、ヘッダーがページ下部の要素を隠してしまうと固定する意味が無くなります。

ヘッダーは常に前に表示されなければいけないので、z-indexの数値は大きくすることがおすすめです。中途半端な数値だと他の要素にz-indexをつけるとなるとヘッダーの変更忘れで前に表示されなくなる可能性があります。

おすすめとしては0～100までを使うと決めて、ヘッダーには100を指定することです。

ハンバーガー、アコーディオンメニューを使う

ハンバーガーメニューやアコーディオンメニューではアイコンをクリックしてメニューを表示させたり、メニューをクリックして詳細を表示させたりするサイトを見たことがあると思います。クリックやオンマウスで表示が出る場合、他の要素より前に表示させたいことがほとんどです。

そのためにpositionの指定と同時にz-indexも指定する必要があります。ハンバーガーメニューやアコーディオンメニューでもz-indexは数字を決めておくことをおすすめします。

z-indexが効かない場合

position:staticになっていないか

z-indexはposition:static;が指定されている場合、動きません。position:static;の時にz-indexを指定することはほとんどないと思いますが、覚えておいて損はありません。対策として、position;absolute;やrelativeに変更することです。

他の要素に大きい数字を設定していないか

他の要素にz-indexをつけていて、数字が大きな数字の場合、つけようとしている要素が後ろに表示されます。そのため、z-indexが効いていないと勘違いするケースもあります。縦に長いページを作る際、指定したことや指定した数値を忘れることがあります。

対策としては0～100までと範囲を決めておいて、その範囲で数値を用意することがおすすめです。絶対に前に出したい要素は100、他にありそうなものは50などルールを設けることで対策すれば間違えることはないと思います。

コード例

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>header-fixed</title>
    <link rel="stylesheet" href="./style.css">
  </head>
  <body>
    <header>
      <div class="header-logo">
        <h1>Logo</h1>
      </div>
      <div class="header-list">
        <ul>
          <li>HOME</li>
          <li>Canpany</li>
          <li>Works</li>
          <li>Contact Us</li>
        </ul>
      </div>
    </header>
    <div class="container">
      <main>
        <h2>画像がメニューの下に隠れます。</h2>
        <p>
          <img src="画像ファイル" alt="下にくる画像" />
        </p>
      </main>
    </div>
  </body>
</html>

* {
  padding: 0;
  margin: 0;
}

body {
  width: 1080px;
  margin: 0 auto;
}

.container {
  width: 100%;
}

header {
  position: fixed;
  z-index: 100;
  height: 150px;
  background-color: white;
  width: 1080px;
  padding-top: 50px;
}

.header-list {
  height: 100px;
}

ul {
  display: flex;
  padding: 0;
}

li {
  text-align: center;
  line-height: 100px;
  list-style: none;
  width: 25%;
}

main {
  padding-top: 300px;
  height: 1000px;
}