要素の重なり順を変更する:z-index

インドネシア独立記念日

昨日(8月17日)はインドネシア70回目の独立記念日だったそうで、私が住んでいるバリからGoogleにアクセスすると勝手にインドネシア版Googleに行くので、Googleがこんな独立記念日ロゴになっていました。

それはさておき、先週は溜まりまくっていた仕事を片付けてたんだけど、自分がいかにCSSをよくわかってないんだなということが露見しました。そして新しいことを学びました。忘れないようにメモしときます。

検索結果がメニューにかぶさちゃって見えない

こんな感じの現象です↓
z-index要素の重なり順を指定

このサイトでは、WooCommerce Product Searchの検索ボックスをトップナビゲーションにおいて、メインナビゲーションはUbermenuというプラグインを使っております。

で、WooCommerce Product SearchはAjaxでWoocommerceの商品検索をして結果を検索窓の下にリスト状で表示させるんですが、なんだかその検索結果が、下にあるUberMenuに被ってみえない…

z-indexでレイヤーの重なり順を指定して解決!

divなんかのブロック要素のレイヤーの重なり順の指定できるプロパティというのがあるんです。「z-index」というやつで、この値が小さいほど奥へ、大きいほど手前に表示されるとのこと。

で、Product SearchとUberのz-indexの値を調べてみると

Uber : z-index:100;
Product search : z-index:10;

あぁやっぱり。というわけで、Product searchの方の値を上げてあげて問題解決。思ったより簡単な問題でした。

参考にしたサイト

z-index 【要素の重なり順を指定する】


全く関係ないですが、Uberつながりで。
Uberと言えば、話題のタクシー配車サービスですが、数ヶ月前に私が住んでいるインドネシアのバリ島でもサービスを開始しました。

特に観光ガイドを必要としない移動だけの場合は、できるだけ安くあげたい。バリには一応メータータクシーのBlue Birdという会社があるんですが、メーターを使わせるのにいちいち結局交渉が必要。Uberはその必要なし。あー、素晴らしい。というわけで、今度利用してみようかなと思っています。
https://www.uber.com/ja/cities/bali

Leave a Reply

Your email address will not be published. Required fields are marked *