positionプロパティで配置した要素の重なり順を指定するz-index。値が大きいほど前面に表示されるアレです。
使うだけなら簡単なのですが、いざz-indexの指定箇所が増えてくると「どの要素より上なのか下なのか」「z-indexプロパティが散り散りになって探すのが面倒」みたいな状況に陥りますよね。
じゃあ便利なSass様に効率よくz-indexを管理してもらおうと色々調べたのですが、中々良い方法が見つかりませんでした（何故自分で模索しない）。
それから月日が立ち、たまたま目にしたスライド「CSSで泥沼にはまらない3つのアプローチ」の中でずっと悩んでいたz-indexの管理方法が紹介されていました。
CSSで泥沼にはまらない3つのアプローチ｜『プロとして恥ずかしくない 新・WEBデザインの大原則』発売記念イベント
『プロとして恥ずかしくない 新・WEBデザインの大原則』発売記念イベント用スライド
コレがなんともスマートで素晴らしい、感動しました。
z-indexをSassでスマートに管理する方法
その管理方法がこちらです。
|
1 2 3 4 5 6 7 8 |
$z: header, nav, pulldown, child; .header { z-index: index($z, header); // 1 } .child { z-index: index($z, child); // 4 } |
セレクタ名をリスト型変数で管理し、 リストの中にある値のインデックスを返す関数index()でz-indexの指定をします。
これで例えばheaderの位置をchildよりも前面にしたい、というのであれば、
|
1 2 3 4 5 6 7 8 9 |
$z: child, header, nav, pulldown; // child を先頭に移動 .header { z-index: index($z, header); // 2 } .child { z-index: index($z, child); // 1 } |
このようにリストの値の順番を変更するだけで自動的にz-indexの位置指定も変わる、というワケです。とってもスマートですね！
次からz-indexを管理する場合はこの方法を採用することにしました。スライドを公開してくれた方に感謝です。
余談ですが、今まではCSS-Tricksで紹介されていた方法でz-indexを管理していました。
CSSで直接書くよりは良いのですが、上記のindex()関数を使った方法のが断然良いですね…