<a>タグでリンク設定しているのに、リンク先に飛ばないことありませんか？

今回のケースは、SP版のヘッダーで起こりました。

ハンバーガーメニューが下に下が理、下に記述したコンテンツによって隠れてしまったので、z-indexを使って重なりが最も上になるように設定しました。

{
position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    color: #FFF;
    z-index: 100;
}

これで、メニューのプルダウンが表示されるようになって安心していたら、ハンバーガーメニューの隣にあるサイトロゴのリンクが効かなくなっていました。

上に何も要素が重なっていないように見えて、検証するとしっかり重なっていました。

なので、ロゴ部分に 「z-index: 110;」を追記したのですが、反応なし。

z-indexはpositionが無いと効かないことがあるんですね。

z-indexが効かないときの対処法

{
position: relative;
    z-index: 120;
    width: 85%;
}

上記のようにpositionを設置して解決することができました。

リンクが効かない時、試してみてください。

AIを導入しリーズナブルで確実と信頼があるホームページ制作はアピステクノロジーへ

アピステクノロジーでは、特注システム開発をはじめ、AIを導入したHPの制作にも力を入れています。

WordPressはもちろん、ShopifyのECサイトもご要望に応じて制作いたします。

詳しくは弊社HPをご覧ください。

アピステクノロジーの実績紹介はこちら

システムの入ったパッケージ「ITツール」紹介ページはこちら

アピステクノロジーでは、IT専門家としておすすめPCの販売も行っています！