【CSS】「z-index」について簡単に解説。【分かりやすい】

「z-index」について簡単に教えてほしい。

この記事は、この様な方へ向けて書いています。

この記事を読むことで、これらの知識が得られます。

この記事でサクッと「z-index」について学習しちゃって下さい！

また、下の動画で「z-index」プロパティについて詳しく解説しているので、一緒に実際にコードを書きながら学びたい方はこちらをどうぞ！

「z-index」では、何ができるのか？

「z-index」を使うと、要素の「重なり順」の設定ができます。

例えば、このように要素が重なっている時に、その「重なり順」を変更したい！みたいなこともあると思います。

そんな時に「z-index」を使えば、重なり順の変更ができます。

この様に、重なり順をCSSから変更できます。

なるほど！イメージができた！便利そう～。

「z-index」が使える要素とは？

「z-index」はどんな要素にでも使える訳ではなくて使える場面が限定されています。

使える要素は下記の通りです。

これら以外の要素に対して「z-index」を指定しても効果はないので注意して下さいね。

位置指定要素とは？

位置指定要素とは、「position」プロパティの値が初期値の「static」以外の要素のことです。

特に位置を動かしたくないけど、重ね順だけ変更したい場合は、「position: relative」を使うといいと思いますね。

フレックスアイテムとは？

フレックスアイテムとは、「display: flex」と指定された要素の子要素のことです。

このフレックスアイテムにも「z-index」は使えるので、忘れないようにして下さいね！

なるほど！これは見落としガチかもね。

通常の要素の重なり順について。

「z-index」が指定されていない通常の要素の重なり順は、HTMLファイルで上に出てきたものが下で、後からでてくる要素が上にきます。

HTMLファイルは上から順番に読み込まれるので、その順番通りに下から上に配置される感じですね。

ふむふむ。

「z-index」の使い方！

では、「z-index」の使い方について、具体的に解説していきます！

.box {
    position: relative;
  }

まずは、この様に「position」プロパティの値に「static」以外の値を指定します。

これで位置指定要素になりました。

「z-index」は「整数」で指定する。

.box {
    position: relative;
    z-index: 1;
  }

この様に、「z-index」の値には整数を入れます。

「値が大きいほど上」に表示されます。

「値が小さいものは下」に表示されます。

「z-index」を指定してない要素は「０」

「z-index」を指定していない要素は、「z-index」が「０」と等しい感じです。

なので、「z-index: 1」とすれば、何も指定してない要素よりも、上に表示されます。

「 ー （マイナス）」の値も設定できる。

「z-index」には、「 ー （マイナス）」の値も設定できます。

「z-index」を指定してない要素は「０」と等しく計算されるので、「 ー （マイナス）」の値を使うと、何も指定してない要素よりも下に表示することができます。

「z-index」を使う上での注意点とは？

入れ子になっている構造で「z-index」を使うと、予想と違うことが起きるかもしれません。

<div class="container">
        <div class="pink">z-index: 3</div>
        <div class="green">z-index: 2</div>
        <div class="skyblue">z-index: 1
            <div class="yellow">z-index: 4</div></div>
        </div>
    </div>

.pink {
    background-color: pink;
    position: relative;
    z-index: 3;
  }
  .green {
    background-color: green;
    position: absolute;
    top: 60px;
    left: 60px;
    z-index: 2;
  }
  .skyblue {
    background-color: skyblue;
    position: absolute;
    top: 120px;
    left: 120px;
    z-index: 1;
  }
  .yellow {
    background-color: yellow;
    position: absolute;
    top: 20px;
    left: 20px;
    z-index: 4;
  }

この様なコードを書きました。

すると、下の様になります。

「z-index: 4」の「yellow」の要素が、「z-index: 2」の「green」の要素よりも下にきています。

それはなぜかと言うと、そもそも「z-index: 4」の要素は、「z-index: 3」の「skyblue」の要素の子要素です。

そして、「z-index: 4」と言うのは、親要素の中でのみ効力を持つので、親要素の重なり順を超えることは、できません。

全ての要素がフラットに「z-index」の値で比べられる訳ではなくて、あくまで「z-index」は親要素を超えて作用しないことに注意して下さいね。

ふむふむ。具体例があると分かりやすいね！

「z-index」が指定されていない時の重ね順をさらに詳しく解説。

「z-index」が指定されていない場合の、要素の重ね順を整理すると、下記の様になります。

上から下にいくにつれて下に表示されますね。

このような順番になります。

「位置指定要素」は「位置指定要素じゃない要素」よりも上に表示されます。

そして、その間に「浮動ブロック」というものがきます。

「浮動ブロック」とは？

CSSの「float」プロパティの値が「none」以外の要素は「浮動要素」と呼ばれ、その要素の子孫要素も含めた塊を「浮動ブロック」といいます。

今はあまり「float」プロパティは使われないのですが、昔は要素を横並びにする時などに使われていました。

現在は、要素の横並びは、「display: flex」などが使われることが多いのかなと思います。

公式定義

「z-index」プロパティの公式定義について書いていきます。

初期値の「auto」だと、上述した通り、HTMLファイルで下に書かれたものが上に表示されます。

まとめ。

「z-index」を使うと、要素の重なり順の指定ができる。

「z-index」は、下記の2通りの時のみ有効。

• 位置指定要素
• フレックスアイテム

通常の要素の重なり順は、HTMLファイルで、下に出てきた要素が上に表示される。

「z-index」は「整数」で指定する。

もしくは、「auto」というキーワード値。

「z-index」を指定してない要素は「０」。

「 ー （マイナス）」の値も設定できる。

「z-index」の値で純粋に比べるのではなく、「z-index」の効果は親要素の範囲を超えない。

「z-index」が指定されていない時の重ね順は、下記の通り。下にいくほど上に表示。

1. 位置指定要素じゃない要素。
2. 浮動ブロック。
3. 位置指定要素。

公式定義は、下記の通り。

• 初期値は、「auto」
• 継承は、なし。

こんな感じですかね！

また、下の動画で「z-index」プロパティについて詳しく解説しているので、一緒に実際にコードを書きながら学びたい方はこちらをどうぞ！

ではまた！