z-indexが下の要素も上の要素もクリックできるようにする

z-indexを指定して要素を重ねている時、下になっている要素にリンクを設定したのですが、そのままだとクリック出来ない状態で困りました。

解決方法についてメモしておきます。

 

問題

もともとz-indexが指定してあり、2つの要素が重なっておりました。

重なっている要素のうち下の要素にリンクを設定したかったのですが、普通に設定しただけだとクリック出来ない状態でした。

 

解決方法

上になっている要素に、pointer-events: none; を付け加えます。

#zindex2 {      //  z-indexを指定して上になっている要素

z-index: 2;
pointer-events: none;
}

すると、下になっている要素がクリックできるようになります!!

 

しかしこのままだと、上の要素にもリンクがある場合、そちらがクリック出来なくなってしまいます。

それを解決するには、上の要素の配下にある、リンクを設定している要素に、pointer-events: auto; を付け加えます。

#zindex2 {      //  z-indexを指定して上になっている要素

z-index: 2;
pointer-events: none;
}
#zindex2_button {   // zindex2の配下にある要素

pointer-events: auto;
}

 

 

これで上になっている要素も下になっている要素もリンクをクリックできるようになりました!