これはスマート!z-indexをSassで管理する方法に感動しました

positionプロパティで配置した要素の重なり順を指定するz-index。値が大きいほど前面に表示されるアレです。

使うだけなら簡単なのですが、いざz-indexの指定箇所が増えてくると「どの要素より上なのか下なのか」「z-indexプロパティが散り散りになって探すのが面倒」みたいな状況に陥りますよね。

じゃあ便利なSass様に効率よくz-indexを管理してもらおうと色々調べたのですが、中々良い方法が見つかりませんでした(何故自分で模索しない)。

それから月日が立ち、たまたま目にしたスライド「CSSで泥沼にはまらない3つのアプローチ」の中でずっと悩んでいたz-indexの管理方法が紹介されていました。

コレがなんともスマートで素晴らしい、感動しました。

 z-indexをSassでスマートに管理する方法

その管理方法がこちらです。

セレクタ名をリスト型変数で管理し、 リストの中にある値のインデックスを返す関数index()でz-indexの指定をします。

これで例えばheaderの位置をchildよりも前面にしたい、というのであれば、

このようにリストの値の順番を変更するだけで自動的にz-indexの位置指定も変わる、というワケです。とってもスマートですね!

次からz-indexを管理する場合はこの方法を採用することにしました。スライドを公開してくれた方に感謝です。


余談ですが、今まではCSS-Tricksで紹介されていた方法でz-indexを管理していました。

Handling z-index | CSS-Tricks

CSSで直接書くよりは良いのですが、上記のindex()関数を使った方法のが断然良いですね…

コメント

「何かそこ違うよ」「こうした方が良い」っていう部分があったら指摘して頂けると嬉しいです。

トラックバック

トラックバックは現在ありません。

Trackback: https://increment-log.com/z-index-sass-management/trackback/