CSS防止點擊穿透是我們在前端開發中遇到的一個常見問題，它會造成用戶界面的不好使用體驗。

Click穿透是怎么產生的呢？舉個例子，假設我們有兩個div，它們分別為A和B，B在A上方，而A里有一個按鈕，當A的按鈕單擊時有個彈出層，而B的背景色是透明的。當我們單擊A的按鈕展開彈出層之后，如果在彈出層下單擊一次，那么這個事件會穿透到B上面。這就是click穿透問題！

但是，CSS對于click穿透的問題提供了一些解決方案。

一種解決方法是通過為彈出層添加一個z-index，然后將其背景顏色設為transparent。同時，將其position屬性設為fixed。

.popup {
z-index: 1000;
position: fixed;
background-color: transparent;
}

通過使用這段代碼，我們可以防止click事件穿透到彈出層下面的元素。

另一種解決方法是將背景顏色設為不透明，并在彈出層下面添加一個半透明的覆蓋層。這樣，當我們單擊彈出層下面的元素時，click事件會首先被覆蓋層捕獲。

.popup {
position: absolute;
background-color: #fff;
}
.cover {
position: fixed;
left: 0;
top: 0;
height: 100%;
width: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 999;
display:none;
}

通過使用這種方法，我們可以防止click事件穿透到彈出層下面的元素。

在實際開發中，需要根據具體情況選擇合適的方法來解決click穿透問題。