ワケ分からなくなりがちなz-indexの整理法

z-indexって訳分からなくなりがちですよね。

「この要素は前の方に来て欲しいから、100。」「あれ、でも既に100くらいの数字使っていたような気がするなあ。」「じゃあ、とりあえず、1000で。」とか言って、どんどん数字がインフレしていって、気づいたら1000000とか使っちゃってたりしますよね。

LESSで管理するなら

最近CSSを綺麗にするためにLESSを導入したのですが、LESSの変数を使えばz-indexもカオスになりません。

@charset "UTF-8";
 
@z-body: 0;
@z-header: 100;
@z-footer: 100;
@z-menu: 110;
@z-flash-message: 1000;

何かというと、こんな風にz-indexを要素ごとに列挙しておいて使うだけなんですが。

#flashMessage {
  width: 100%;
  height: 40px;
  z-index: @z-flash-message;
}

CSSの至る所にz-indexが分散すると、もはやどの数値が使われているか分かりませんが、1箇所にz-indexをまとめておけば問題になりません。z-indexの変数の定義は、順番に並べておけば、どの要素が上になるかすぐに分かって便利です。

ピュアCSSで管理するなら

もちろん、LESSなんて導入してられないよ、という場合もあると思います。

今まで考えもしなかったのですが、良く考えてみると、z-indexがまとまっていれば良いので、z-indexだけ外に出してしまえば比較的分かりやすくなります。

header {
  z-index: 100;
}
footer {
  z-index: 100;
}
.menu {
  z-index: 110;
}
#flashMessage {
  z-index: 1000;
}

この場合は、zindex.cssみたいなファイルを作って、CSS冒頭でimportするなどすると良いと思います。

ポイントとしては、zindex.css以外にz-indexを書き始めると、結局わけわからなくなるので、zindex.css以外にz-indexを書かないように徹底することですね。これは、LESSを使う場合も同様です。

About katty0324

Leave a Reply

Scroll To Top