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を使う場合も同様です。
コメント