CSS

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

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

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

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)