frontendmemo

このサイトは、「html、css、js、ruby,ツールなどについて、自分が覚えたこと、またはいつも忘れて調べることを書き溜め、それが結果といて勉強したての初心者の方や自分と同じような技術レベルの人の助けになることを目的とするWebログ」、略してブログです。挨拶→http://frontendmemo.hatenablog.com/entry/2016/06/25/115845

z-indexの数値をルール化するための覚書き

スポンサードリンク


スポンサードリンク


z-indexの数値っていくつに設定したらいいかわからないですよね。適当な数値を入れてしまうと特に大規模サイトはカオスになってどこかで崩れます。崩れ方もグレーの背景にその要素だけ前に出てたりして目立つ&かっこ悪いです。

z-indexのルール

z-indexのルールはサイトによって決めるべきではありますが、大方下記で問題なさそうです。

  • z-index:1=デザイン上重ねたい要素
  • z-index:100=topに戻る、ヘッダー固定
  • z-index:1000=モーダルウィンドウ、スマホメニュー

このようなコーディングガイドラインなどのドキュメントにz-indexのルールをまとめておきます。

もし他に追加で重ねたい要素が出てきたらドキュメントを見返して要素の実装時に崩れがないか一目でわかります。