positionプロパティで配置した要素の重なり順を指定するz-index。値が大きいほど前面に表示されるアレです。
使うだけなら簡単なのですが、いざz-indexの指定箇所が増えてくると「どの要素より上なのか下なのか」「z-indexプロパティが散り散りになって探すのが面倒」みたいな状況に陥りますよね。
じゃあ便利なSass様に効率よくz-indexを管理してもらおうと色々調べたのですが、中々良い方法が見つかりませんでした。
それから月日が立ち、たまたま目にしたスライド「CSSで泥沼にはまらない3つのアプローチ」の中でずっと悩んでいたz-indexの管理方法が紹介されていました。
CSSで泥沼にはまらない3つのアプローチ｜『プロとして恥ずかしくない 新・WEBデザインの大原則』発売記念イベント
『プロとして恥ずかしくない 新・WEBデザインの大原則』発売記念イベント用スライド
コレがなんともスマートで素晴らしい、感動しました。
z-indexをSassでスマートに管理する方法
その管理方法がこちらです。
$z: header, nav, pulldown, child;
.header {
z-index: index($z, header); // 1
}
.child {
z-index: index($z, child); // 4
}セレクタ名をリスト型変数で管理し、 リストの中にある値のインデックスを返す関数index()でz-indexの指定をします。
これで例えばheaderの位置をchildよりも前面にしたい、というのであれば、
$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を管理していました。