リンクの上に別の要素が重なった時でもリンクを押せるようにする方法

リンク要素の上にbeforeやafter、もしくは別の要素が重なってリンクボタンが押せない!!ってことがたまにありますよね。
z-indexで順番を変えてしまってもいいですが、リンクが下にあってもリンクを有効にする方法を紹介します。

リンクの上に別の要素が重なった時でもリンクを押せるようにする方法

今回の方法はCSSのみで完結します。
使用するのは「pointer-events: none」。
指定したもののクリックを無効化してくれます。

では早速描いていきます。

<div class="wrap">
<div class="ue">上の要素</div>
<div class="shita"><a href="#">ボタン</a></div>
</div>
.wrap{
position: relative;
}

.ue{
position: absolute;
z-index: 2;
pointer-events: none;
}

.ue{
position: absolute;
z-index: 1;
}

「pointer-events: none」は、ブラウザサポートも充実しているので、困ったときは使ってみてください。

コメント

タイトルとURLをコピーしました