3分で読める!【CSS】重なり順が下の要素をクリックする方法

f:id:ume1017:20201112194243j:plain

 
本日のテーマは

重なり順が下の要素をクリックする方法です!

 

どう言う時に使用するのか?

z-indexなどを使用して要素を前面に出した際に

背面になった要素が機能しなくなることがあります。

※ボタンが反応しない、a要素が反応しないなど

 

使用するCSS(サンプルコードあり)

使用するCSSは「pointer-events: none;」です。

<サンプルコード>

.sample1{
     z-index:2;
     pointer-events;
}

.sample2{
     z-index:1;
}

前面に出ている要素にpointer-events:noneを指定すれば、

背面にあるリンク要素やボタン要素も使用できます!