CSSのz-indexプロパティが思い通りにならない！その対処方法は？

CSSのプロパティのz-indexは便利です。でも少し癖があります。元から設定されていたz-indexを変更する場合は問題が起きませんが、自分で追加する場合は原理を理解しておいた方がトラブルが減ります。

トラブルの事例としては大きく2つです。

• z-indexそのものが効かない
• z-indexが意図した動きにならない

この記事では、z-indexが効かない時の事例とトラブルシュートの方法について説明しています。

z-indexそのものが効かない

大前提としてstaticな要素にはz-indexが指定できないので、z-indexを指定しても無視されます。

position:staticではなく、positon:relativeに指定することでz-indexが有効になります。

自分で要素を追加した時にz-indexを指定する場合は、positonプロパティを確認しましょう。

参考：CSSのpositionとz-indexの関係 (absoluteやfixedよりもstaticを手前に表示する)

z-indexが意図した動きにならない

それぞれの要素のz-indexは正しく機能しているのに、重なり方が逆になってしまう。

例えば追従ヘッダーと、後からフッターにactionフック（wp_footer）で追加した要素で起きやすい事例です。

body
+ main（z-index:1）
  + header（z-index:101）
+ footer
  (ここに追加したz-index:999の要素がheaderより常に上位に表示される)

なぜこのようなことが起きるかというと、mainとfooter間のz-indexで優先順位が決まっているので、その子要素同士のz-indexの大小で優先順位が変わりません。

z-index再入門 | 第1回 z-indexの仕組み

z-indexは要素の重なりを指定するプロパティですが、その仕組みを正確に押さえておかないと、思い通りの重なり順になりません。まずはz-indexの仕様も含め、z-index使用に必須項目を解説します。

www.codegrid.net

通常このような親要素のz-indexの優先順位は意識しくても問題は起きません。なぜなら、position:relativeの時には、それぞれが重なることがないからです。

もし、footerに追加した要素をposition:absoluteにしてmain要素に重ねたとします。

そうなると、mainとfooterの優先順位が効いてきます。footer側が強くなり、固定した要素のz-indexをいくら下げても、固定ヘッダーよりも上位に表示されてしまいます。mainのz-indexを上げると、今度は固定した要素のz-indexをいくら上げてもmainよりも下になってしまい表示されなくなります。

これを避けるためには、mainの要素として固定する要素を追加すれば、z-indexが機能するようになります。

main内部にあるactionフックなりfilterフックを探して、固定する要素を追加することで、追従ヘッダーに対して固定する要素のz-indexが機能するようになります。

wp_body_open()フックを使えば良さそうに思えますが、bodyタグ直後なので使えません。

テンプレートファイルを開いて、main以降に目ぼしいフックが無いか確認しましょう。

まとめ

ピンポイントで困っている人にしかわからないような内容になってしまいました。

ポイントは、

ということでした。