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

Ads by Google

CSS3 badge

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

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

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

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

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

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

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

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

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

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

こちらの記事もいかがですか?

アナタにオススメ!
同じカテゴリーの他の記事です。

Ads by Google