CSS阻止點擊穿透

點擊穿透是指當一個元素的上層元素有點擊事件并阻止冒泡時，下層元素也有點擊事件并綁定了事件處理函數，此時在上層元素中點擊會觸發下層元素的點擊事件的現象。

使用以下兩種方法可以避免點擊穿透問題：

/*方法一：禁止下層元素的pointer-events*/
.bottom {
pointer-events: none;
}

在上層元素中添加pointer-events: none; 將不能接收鼠標事件的下層元素設置為none，從而可以阻止點擊穿透。但是這種方法會導致下層元素失去鼠標事件。如果需要下層元素也響應事件，可以結合JS來實現。

/*方法二：設置上層元素的z-index*/
.top {
z-index: 1;
}
.bottom{
z-index: 0;
}

在上層元素設置一個較高的z-index，比下層元素的z-index高，這樣在點擊上層元素時就不會觸發下層元素的點擊事件了，從而避免點擊穿透問題。但是這種方法需要手動設置z-index，如果頁面中的元素過多、層級過深，手動設置z-index會變得非常麻煩。