CSS）z-indexのベストプラクティスを考える

CRANK

CSSのz-indexプロパティについてツイートしたところ、色んな人から参考意見をいただきました。要素の重ね順の制御をその場しのぎで乗り切っているWebサイト、実はけっこう多いような気がします。今回はz-indexのベストプラクティスを自分なりに探ってみたいと思います。z-indexに詳しいゼットインデクサーのみなさま、意見やアドバイスがあれば是非コメントを残していってください。z-indexについて考えるときの前提まず、ざっくりと考え方をまとめておきます。ウェブページの要素の重ね順を理解するには「スタッキングコンテキスト（重ね合わせコンテキスト）」を知っておく必要があります。詳しくはz-indexとスタッキングコンテキストの関係 - ics.mediaがとても分かりやすいのですが、ここではざっくりとした説明だけ載せておきます。z-indexは数字が大きい方が上にいくとは限らない↑ 例えば、z-index:3の要素と、z-index:99の要素があるとします。どちらもが同じ親要素のすぐ下にいるような場合は、z-index:99が上にきます。これなら直感的で分かりやすいですね。↑ しかし、どちらかが属する親要素にz-indexが指定されている場合は話が変わってきます。z-index:99がz-i…