リンクが効かない原因

2023年12月13日

<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を設置して解決することができました。

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

[cc id=1656]

よかったらシェアしてね！