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

リンク要素の上に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」は、ブラウザサポートも充実しているので、困ったときは使ってみてください。

 

 

web制作を勉強したい方におすすめの教材も紹介しているので是非参考にしてみてください。
web制作の勉強にオススメの書籍を紹介します！