【CSS】重なり順（z-index）の値が下の要素をクリックする方法

ウェブサイトを装飾する目的で、要素の重なり順をz-indexで指定したときに、装飾目的の要素が前面になり、クリックしたいボタンなどの要素が背面になってしまうケースがあります。

このままだとボタンがクリックできずに困るので、なんとかして前面の要素を無視して背面にあるボタンをクリックできるようにしたい。

この問題を解決するために、「JavaScript等を使う必要があるか……？」と考えてしまいそうになりますが、実はスタイルシートだけで解決できます。

使用するのは「pointer-events」属性。

例えば次のようなHTMLで、前面にある要素「class="sample"」のクリックやタッチ操作を無効にしたい場合。

<div class="sample">デザイン要素</div>
<button class="button">button</button>

スタイルシート側で前面にある要素に対してpointer-events:none;と記述します。

.sample {
	position:absolute;
	z-index:2;
	pointer-events:none;
}

.button {
	position:absolute;
	z-index:1;
}

ほとんどのブラウザでサポートされていますので気軽に利用可能です。