- はじめに
- 1. position: static の要素ではz-indexは効かない
- 2. 基本的にはHTMLの記述順に重なる
- 3. z-indexを指定した場合は数値の大きいものが上に重なる
- 4. 親子関係がある要素ではz-indexの数値に関係なく親の上に子が重なる
- 5. 親階層のz-indexの比較が優先して評価される
- おわりに
はじめに
こんにちは、フロントエンドチームの北嶋です。
今回はCSS初学者がつまずきがちな、z-indexについて書きたいと思います。
タイトルの「z-index:0とz-index:100ならどちらが上にくる？」の問いですが
え、普通にz-index:100じゃないの？と思った方は残念ながら不正解です。
正解は「場合による」なんですよね。
CSSをしっかり勉強したことがある方なら簡単に分かるとは思いますが
- どのような場合にz-index:0が勝つのか
- どのような場合にz-index:100が勝つのか
を正しく理解するために、z-index関連のルールを整理していきたいと思います。
1. position: static の要素ではz-indexは効かない
前提としてposition: staticが指定されている要素では、z-indexは無効です。
position: staticはデフォルトの値なので、z-indexを有効化するためには、CSSで要素にposition: static以外を指定してあげる必要があります。
※2以降で説明する要素には、すべてposition: static以外が指定されていることとします。
2. 基本的にはHTMLの記述順に重なる
z-indexに数値の指定がなかった場合は、書いた順に要素は重なって行きます。
z-indexの数値が同じだった場合も、同様の挙動を示します。
See the Pen z-index_sample by hk-rks (@hk-rks) on CodePen.
3. z-indexを指定した場合は数値の大きいものが上に重なる
こちらは直感的な動きですね。
z-index:100の方がz-index:0よりも数値が大きいので、z-index:100が上に重なってきます。
See the Pen z-index_sample_2 by hk-rks (@hk-rks) on CodePen.
4. 親子関係がある要素ではz-indexの数値に関係なく親の上に子が重なる
下のコードでは、z-index:100の親要素と、そこに属するz-index:50とz-index:10の子要素が二つあります。
まず、z-index:100の親要素が数値が一番大きいにも関わらず最も下に配置されていることが分かると思うのですが、これは要素同士に親子関係が形成されているからです。
用語としてはスタックコンテキストというのですが「親をベースとして階層が形成され、その上に子要素集合の階層が形成される」というイメージで理解してもらえればOKです。
子要素同士では同じ階層なので、z-index50がz-index:10よりも大きいので上に重なるという通常のz-indexの動作を示していますね。
See the Pen z-index_sample_1 by hk-rks (@hk-rks) on CodePen.
5. 親階層のz-indexの比較が優先して評価される
下のコードでは以下の要素があります。
- z-index:100の親要素と、そこに属するz-index:10の子要素
- z-index:0の親要素と、そこに属するz-index:20の子要素
注目すべきは、子要素同士ではz-index:10とz-index:20の二つの要素がありますが、z-index:10の方が上に来ている点です。
こちらもスタックコンテキストの考え方を適用すれば理解しやすいのです。
まず親要素同士ではz-index:100とz-index:0の二つの要素があって、z-index:100が上に来ていますね。
この親階層をベースとして、子要素が上に乗っているので
- z-index:100の上に乗っているz-index:10
- z-index:0の上に乗っているz-index:20
では前者の方が上に重なるということになります。
つまり、親階層でのz-indexで負けていたら子要素の方でいくらz-indexを大きくしても上に重なることはできないということですね。
See the Pen WNRmQyr by hk-rks (@hk-rks) on CodePen.
おわりに
ここまで理解できれば、タイトルの問いの答えが「場合による」ことが分かってきたのではないでしょうか？
記事を書いていて、僕自身が初学者の頃にひらすらz-indexを大きくしていた時期が懐かしく思い出しました笑
更に理解を深めたい方は「スタックコンテキスト」で調べると詳しい情報がたくさん出てきますので、ぜひ参考にしてみて下さい。
それでは、ここまで読んでいただきありがとうございました！
エンジニア中途採用サイト
ラクスでは、エンジニア・デザイナーの中途採用を積極的に行っております！
ご興味ありましたら是非ご確認をお願いします。
https://career-recruit.rakus.co.jp/career_engineer/カジュアル面談お申込みフォーム
どの職種に応募すれば良いかわからないという方は、カジュアル面談も随時行っております。
以下フォームよりお申込みください。
forms.gleイベント情報
会社の雰囲気を知りたい方は、毎週開催しているイベントにご参加ください！ rakus.connpass.com
