要素が下のリンクを適応させクリックできるようにする方法

下の要素がリンクで、その上に画像をあわせたりした場合などに、リンクが効かなくなる問題を解消します。

 
最近私が躓いた部分なのですが、あまりにも簡単に解決できて驚いたので、もし、、、万が一・・・悩んでる方がいたらぜひお試しください。 

z-indexやpositionで要素を重ねたときの話

position:absoluteは親要素に対して、小要素の位置を調整できるのでなかなか便利ですよね。
レスポンシブサイトにした今でも、使う箇所があります。

例えばランキング

ランキング一覧みたいなページを作る時。
リンクが適応されたサムネイルの上に、順位を重ねませんか？
レスポンシブでは絶対値はあまり使わないイメージですが、こういったシーンではとても役立ちます。

上に重ねた要素が邪魔してリンクが押せない問題

さて、そんなランキングの表示では、
サムネイルを押したら別のページに飛ばしたいのに…





この、上に重ねた要素（順位の部分）が邪魔をして、
サムネイルのリンクが押せなかったりします。


もちろんaタグの中に、サムネも順位も入れていれば大丈夫なのですが
今回はループの問題もあり、順位画像をaタグの外に吐き出していたため
サムネイルリンクの邪魔をされる形になりました(´・ω・｀)

透過PNGを上に重ねて、それっぽく見せるリンク

 


あとは、こんな感じでリンクボタンの上に絵を重ねて、リンクを豪華に見せたい！
透過部分の後ろでリンクが見えて、そのリンクを押したい！
みたいなときがあって。
（この例だとはんぱなくしょぼいですがｗ）


透過してたらリンクも透過されるわけもなく…
画像が邪魔してリンクは押せません。。




しかし！！

上の要素に一行追加するだけで解決！！

なんと、一行でこの
「下の要素がリンク、上に別の要素を重ねた時、リンクに遷移しない問題」
を解決することができたのです。。
 

pointer-events: none;

リンクの上に重ねている要素に

pointer-events: none;

こちらを追加します。
ハイ終わり。
こちらでマウスイベントの発生が制御されました。
なので、上の要素へのクリックなどが関係なくなり、下の要素をクリックできる、つまりリンクに飛べるわけです。




たった一行で、要素が下のリンクを最強にすることができました。
お試しあれ〜〜〜。