cssのz-indexの重なり順で困ったときにしてみたこと

このエントリーをはてなブックマークに追加

css z-index

z-index設定したけど変なところで他のコンテンツが重なって見えなくなる!!とか、こんな経験ないですか?それってz-index戦争起きていませんか?今回は、僕がz-index戦争が起きなければいいな〜と思いから対応した内容をまとめます。きっともっといい方法をあると思うので、こんな風にやるやつもいるのか程度で見ていただけると嬉しいです。

z-index戦争が起きる理由

・ルール化されていない
・1づつ上げていくと、その間に表示させたいものが出来た場合に困る
・複数人でCSSの変更する場合、バッティングする恐れがある

おそらくこんな感じのことで困ることが多いように思います。各自がその場その場でz-indexの値を決めていくと思いもよらないところでバッティングをして重なり順がおかしくなる。それをどうにかしようとごにょごにょし始める。そのときは理解しているけど、次z-indexをいじるときに同じような問題が起きる。

結構、手間がかかるんですよね。ということで、今回はリファクタリングで対応したときにどんなことをしたかまとめてみます。僕程度の人間が考えたことなので、もっといい方法があると思います。なので、参考になれば・・・。

以下に、z-index戦争が起きないようにするためにまずしたことをまとめますね。

z-indexが使われているところを洗い出し

どのセレクタで使われているかわかるように、セレクタも含めて一個ずつ洗い出しました。リアファクタリングなのでまずはこの作業からですね。

値をまとめて列挙する

おそらく値が重複していると思われるので、まとめられそうなものはまとめてみました。

z-index:1;でOKなものは1にする

無意味に大きな数字を使っていて「1」でも大丈夫なものは「1」にしちゃいました。というのも、sassの変数で管理しようと思っていたので、極力変数の数は増やしたく無かったんです。なので、検証をして「1」でいいなら思い切って「1」にしちゃいます!!

z-indexの変数を作る

今回はsassで変数を作って管理します。


/* default */
$z_index_default: 1;

 /* below */
$z_index_below: -1;

/* content */
$z_index_bubble: 1000; // 吹き出しとか
$z_index_slider: 1000; // slider
$z_index_header: 1010; // 固定ヘッダー
$z_index_popup: 1900; //ポップアップ

/* toplayer */
$z_index_toplayer: 2000;

参考までに上記のようにしてみました。以下で内容を説明しますね。

1,default

これは基本となる値としての変数です。できることならこれで済ませたい。今回は「1」にしてます。

2,below

マイナス方向も時として必要なので。

3,content

bubbleとかpopupとか固定ヘッダーとか、それぞれ変数で管理するので、大カテゴリとしてcontentがあります。さらに、上記の例だとbubbleとsliderが同じ値ですね。同じ値を使い回すための変数ってよりかは管理するための変数として使いたいので、同じ値でもあきらかに用途が違う場合には別途変数を作ります。

4,topLayer

絶対に、重なり順を侵害されたくないものは、これを使います。用途はかなり選びますね。極力あまり使いたくない。むしろなくても良いのかも。今回は、PR広告的なのものでどうしても必要だったのでそのために作りました。

z-indexの変数のrangeを決める

ルール化のためにそれぞれrangeを決めます。defaultとbelowはそれぞれ固定なので、contentとtoplayerですね。僕が決めたrangeはこんな感じです。

contentのrangeは1000〜1999にする

contentの中身としてpopupとかtooltipとかの変数を作る予定ですが、それらのrangeは1000〜1999にしました。そんなに大きな数字にしなくてもいいかなというのと、1の位は使いたくないので、10の位までだとしてもかなりの数に対応できます。

topLayerのrangeは2000にする

これはcontent以上であればいいので、今回の場合だと2000ですかね。

って感じにしました。方針としては、基本的にはdefaultを使う。もしそれで対応できなければcontentのものを使う。命名的に使えそうなものが無ければ変数を作って管理する。どうしても変数が増えていって重なり順がおかしくなる場合は変数の値を変更すればいいという感じです。
それだとなー、変数が大量に出来てしまう可能性があるんですよね〜。ここは改善しなければいけないかなと思っています。

まとめ

だいたいこんな感じで管理できるようにしました。もっともっといい方法があると思うので、知っている方いたらぜひ教えてください〜。
一応、厳格なルールではないけどルールも作ったし、変数で管理して見える化できたので、複数人でも前よりはバッティングの危険性を回避できたかな。とりあえずこれでしばらく運用してみて問題があれば修正ですね。

ではでは、良きz-indexライフを〜

イチマルニデザインブログをフォローしよう

イチマルニデザインブログではTwitterアカウントでWebに関する情報をつぶやいています。フォローすることで最新情報をすぐに受け取ることができます

いいなと思ったらシェアお願いします

このエントリーをはてなブックマークに追加

同じカテゴリーの記事

ページの先頭へ