z-indexが効かない？実案件で困ったこと
introduction
いやぁ、困った困った。他のcoderが作成した案件の修正をお願いされて、モーダルウィンドウの追加実装もお願いされたのですが、見てみてるとz-indexがぐちゃぐちゃすぎて背景を暗くしようにもできない。どうしようと悩んだので、その備忘録と解法をお伝えしようと思います。
z-indexを使う
z-indexを使う人はだいたい以下のような願いがあるのではないでしょうか。
- 要素を重ね合わせをしたい
- headerをfixにしたい
- モーダルウィンドウで背景を暗くしたい
- mix-brendで画像に加工をかけたい
などなど、重なりの用途は本当に様々ですし、非常に便利なものでしょう。しかしそれらを同時に利用しようとすると、競合で困ったことが起きます。これがz-indexが効かないことにつながっています。これを解決するためにクリティカルなコンセプトが、”Stacking Context”です。その理論について少し詳しくなっておきましょう。ただ、基礎理論については僕が解説するよりももっと効率的に学べるサイトがありますので、以下に紹介をしておきますのでこれで学んでみてください。１つ目は日本語の文でわかりやすいと思いますし、2つ目は英語ですが実例が多く、理解しやすいので英語が学べる方はこちらもおすすめします。どちらも読むとしっかりと理解ができますが、英語がわからない方は１つ目のみでも十分です。
Stacking Contextの見つけ方
今回の記事で紹介するのは、このStacking Contextを以下に可視化するかということでしょう。
ところで先述した記事にある通り、親要素がStacking Contextであるかどうかが重要になります。親要素→そのまた親要素→・・・とたどっていくと、一番そこにたどり着くのはきっとhtmlタグでしょう。つまりStacking Contextを可視化するためには、まずはそのhtml要素からStacking Contextの分析を行っていけばよいのです。そして、Stacking Contextはだいたい
- positionがstatic以外のとき
- opacityが0以外のとき
のときに生成されますので(他にもありますが、それは実務の中でひとつひとつ見ていけばいいです。とりあえずはこの２つをしっかりと見て検証すれば8割はヒットでしょう)、これらをdeveloper toolを用いて検証してみると良いでしょう。
比較が大切
結局のところ、実務上で使う場合には様々なケースがありますが、今回はモーダルウィンドウを生成する際、背景を暗くする必要がありました、それは以下のように。
今回においては、1:headerよりもボタンがスタッキングコンテキストが低いこと、2:モーダルウィンドウ自体はどの要素よりも高くしなくてはならないという2つの要因があります。これに着目して、headerのStacking Contextと、ボタンのStacking Contextを比較していく→他に影響する要素がないかを調べる→xd通りになっているかはとにかく慎重に行うと、しっかりとモーダルウィンドウを作成することができました(実務に関わってくるので、あまり内容は言えませんが、大体はこんな感じの内容です。)
できない場合
本当にz-indexの正しい使い方を知らない人はたくさんいます。しっかりと理解してから使ってほしいのですが、もしも無理ならすべてのz-indexを消してから再構成するのも有りかもしれません。その際はローカル環境で行い、本番環境やxdでどれが上に来るかの情報は残したままにするのがおすすめです。
z-indexの注意点
僕も勘違いをしていたのですが、例えば以下のサイトで2つのwrapperに対してz-index:1を入れてみましょう。同じスタックの土台になるはずなので、変わらずフリーザ様が勝利するはずなのですが、実際のところ戦闘力5のカスに負けています。これは、"z-indexがauto以外の値のとき、htmlの記述順に従う"という強い制限が効いています。そのため、z-indexの2段階の適用や、同じz-indexの土台で比べるということはwebにはできません。僕の場合、backgroundにフィルターを掛けるためにz-indexを用いていたのですが、これが仇となってモーダルウィンドウの生成に失敗しました。背景画像にフィルターを当てることは結構アンチパターンなのかもしれません。。
終わりに
今回は指針だけを提示する記事になりましたが、これだけでもきっとStacking Contextに対してできるぞ！ってなる方はいくらかいるのではないでしょうか。
Discussion