z-index が効かない場合の注意点

最終更新日:2020年04月21日 公開日:2019年10月28日

z-indexでの重ね合わせが思ったようにならない場合に確認してみましょう。

z-index が有効になる要素となっているか

z-index を設定しただけでは、その設定は有効になりません。z-index が有効になるには、その要素がスタック要素となっている必要があります。
スタック要素とは、その名前の通り、「スタック(Stack=積み重ね)」ができる要素のことです。では、どういった要素がスタック要素となるかというと、よく使われるものとして以下の2つがあります。

  • position の値が absolute または relative かつ、 z-index の値が auto 以外の要素
  • position の値が fixed の要素

つまり、position が absolute、relative、fixed のどれかになっている必要がある、ということです。
※fixed は、z-index がなくてもスタック要素となることに注意。

また、スタック要素は「スタッキング要素」や「スタッキングコンテナ」などとも呼ばれているようです。「MDN web docs」では「重ね合わせコンテキスト」という名前で、説明されています。
スタック要素となる条件は他にもたくさんあり、上記のMDNのページで詳しく説明されていますので、気になる方は一度見てみるとよいでしょう。

親要素にすでに z-index が設定されていないか

例えば以下のようなHTMLで、A -> B -> C の順に重ね合わせようとしてもうまくいきません。

※widthやらtopやらの指定は省略しています。

理想

現実

C は B よりも大きい z-index を指定しているにもかかわらず、B の方が手前(上)に表示されてしまいます。

なぜこうなってしまうかというと、B の重ね合わせの比較対象は A だけで、実は C は無関係だからです。

この理屈については、A、B、C を階層(レベル)で表すとわかりやすいかもしれません。

z-index の解決は同じレベル間で行われ、その下のレベル(子要素)は上のレベル(親要素)の重ね合わせの結果に従うことになります。

つまり、B が A より手前(上)となっている以上、C の z-index の値をどれだけ高くしても、C が B より手前(上)に来ることはないということです。

上記の例は構造が単純なので、C を A から出して他と兄弟要素となるようにしてしまえば解決ですが、実際はもっと複雑なため、これを知らないと解決するのがなかなか大変です。

また前述のスタック要素となる条件でも挙げていますが、「position: fixed の要素は z-index の指定が無くてもスタック要素となる」という点は、忘れないようにしましょう。

投稿者はそれを忘れていたため、苦しみました。

WordPressを利用したホームページを作成していた時に、ページをスクロールすると「Crayon Syntax Highlighter」でのコード表示がヘッダメニュー部に重なってしまうということがありました。
その時の「Crayon Syntax Highlighter」の表示部は「z-index: 4」となっていたので、単純にヘッダメニュー部の z-index をそれ以上の値にしてみましたが、改善せず。
結局、メニュー部の親要素に position: fixed が設定されていたというオチでした。

 

Contact

ご質問等ありましたら,下のフォームからお願いします.

 
contact
無料ダウンロード中!
大好評の書籍はこちら
Pagetop