以前、グローバルナビゲーションのデザインを大幅に変更しました。
変更内容の詳細は以下の記事に書いています。
上記の変更からしばらくして、グローバルナビゲーションに不具合があることに気付きました。
ちょっとした不具合なのでササっと修正してお終いにしても良かったのですが、せっかくなので不具合対応の内容を記事にしてみようと思います。
それでは、どんな対応をしたか書いていきます。
不具合内容（画像）
まずはどういった不具合か、画像を貼ります。
不具合は上記画像の赤枠部分です。
グローバルナビゲーションのメニューより、読者数を表示しているパーツの方が前面に表示されてしまっています。
他のパーツは前面に表示されることはなく、読書数のパーツだけ何故か前面に表示される不具合です。
ほんとにちょっとした不具合なのですが、この不具合を修正しました。
原因と対策
原因
CSSのプロパティに「z-index」というものがあります。
これは要素の重なり順を指定するものです。
今回の不具合は、この「z-index」の指定値が原因になっています。
参考サイトをリンクしておきます。
それぞれの「z-index」の指定値は以下のようになっていました。
- 読者数の表示パーツ：9～10（※）
- グローバルナビゲーション（変更前）：4
数値が大きい方が前面に表示されるため、要素が重なった時に読者数の表示パーツの方が前面に表示されてしまいます。
※読書数の表示パーツは複数の要素から構成されているようで、その中でz-indexが”9”のものと”10”のものがあるようでした。
対策
この「z-index」の数値を調整して解決しました。
グローバルナビゲーションの「z-index」を”11”に変更しました。
改めて比べるとこうなります。
- 読者数の表示パーツ：9～10
- グローバルナビゲーション（変更後）：11
これにより、要素が重なった時にグローバルナビゲーションの方が前面に表示されます。
不具合対策後（画像）
不具合対策後の画像を貼ります。
不具合対策後は上記画像のようになりました。
読者数を表示しているパーツより、グローバルナビゲーションのメニューの方が前面に表示されるようになりました。
適用したCSS
CSSを修正しました。
いつもならCSSのコードを載せるのですが、今回は「z-index」の数値を変更しただけなので割愛します。
おわりに
ということで、「グローバルナビゲーションの不具合対応（z-index）」に関してアレコレ書いてみました。
今回の不具合はトップページでしか発生しないようです。
記事ページでは発生せず、不具合になかなか気付けませんでした。
また不具合を見つけたら随時修正していきます。
そしてそれも記事にしていこうと思います。
関連記事
グローバルナビゲーションの関連記事をまとめました。
気になる記事があればぜひ。
