お問い合わせはコチラから

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の優先順位は意識しくても問題は起きません。なぜなら、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以降に目ぼしいフックが無いか確認しましょう。

まとめ

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

ポイントは、

  • ソースコードをいじらずにソースを追加する時にadd_headやadd_footerを使うと、main内部の要素に対してz-indexで重なりを制御できなくなることがある。
  • その場合は、main内部の要素として追加できるように、main内部のフックを使えばよい

ということでした。

この記事が気に入ったら フォローしよう
最新情報をお届けします。
この記事を書いた人
ブーン

はるばる日本よりオランダ王国へやってまいりました。
自分の経験が少しでも参考になれば嬉しいです。
お問い合わせは、『こちら』からお願い致します。

\ブーンをフォロー/
スポンサーリンク
サイト運営
\シェアお願いします!/
\ブーンをフォロー/

失敗しないレンタルサーバーランキング

mixhost

不正アクセスに強くて使いやすいおススメサーバー
\本サイトで利用中/
メリット①:自動ウィルス駆除対応
メリット②:サイトの表示速度が速い!
メリット③:転送量の上限が多い!
メリット④:自由にプラン変更ができ、アクセス増にも対応できる!
メリット⑤:バックアップデータが無料で復元できる!
メリット⑥:Wordpressが簡単にインストールできる!
メリット⑦:どのプランでも初期費用が無料!
メリット⑧:10日間の無料お試し期間と30日の返金保証!

Conoha Wing

国内Wordpress最速の最強サーバー
メリット①:圧倒的な表示速度
メリット②:レンタルサーバーと独自ドメインがセットでお得◎
メリット③:プラン変更はすべてのプランで自由自在
メリット④:一か月の利用転送量の制限が緩い(9TB~)
メリット⑤:WordPresサイトの移行が簡単

エックスサーバー

国内シェアNo1の安定性と実績が魅力。ALL SSDで死角なしの万能サーバー。
メリット①:サイトの表示速度が安定して速い!
メリット②:アクセス負荷に強くて安定性が高い!
メリット③:24時間365日の充実サポートで安心!電話サポートもあり!
メリット④:転送量が多い!
メリット⑤:自動バックアップ機能付き!
メリット⑥:WordPressが簡単にインストールできる!
メリット⑦:10日の無料お試し期間がある!

オランダで生きていく
タイトルとURLをコピーしました