CSS PR

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

記事内に商品プロモーションを含む場合があります

リンク要素の上に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制作の勉強にオススメの書籍を紹介します!

ABOUT ME
シラツキ
Web制作会社で働くフロントエンドエンジニア(コーダー)。 ココナラでもお仕事募集しております。 HTML,CSS,JS,WordPress,EC-CUBE,Next.jsなど制作に役立つ情報を発信していきます。 webサイトの運営、修正、制作などお仕事も募集中! お気軽にご相談ください。