Webサイトを制作していると、

「デザインの都合で要素を重ねたいけど、下にあるリンクがクリックできなくなった……」

ということがあります。

例えば、aタグの上に画像や装飾用の要素を重ねたいケースです。

見た目は問題なくても、実際にクリックしてみるとリンクが反応しない。

そんなときに便利なのが、

pointer-events: none;

です。

これを、上に重なっている要素に指定します。

すると、マウスクリックなどのポインターイベントの対象ではなくなります。

見た目としてはそのまま上に重なっていますが、クリックはその下にある要素に届くようになります。