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を管理していました。Handling z-index | CSS-Tricks