在網站開發過程中，我們經常需要使用CSS來控制HTML元素的樣式。其中有一個現象叫做“點擊穿透”，即當我們點擊某個元素時，它的下面的元素也會被觸發點擊事件，這是一個非常讓人困擾的問題。

<div class="container">
<div class="overlay"></div>
<!-- 更多HTML元素 -->
</div>
.container {
position: relative;
}
.overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
}

如上代碼所示，我們現在有一個名為“container”的div元素，內部包含一個名為“overlay”的div元素和其他更多的HTML元素。overlay元素被設置為固定定位，寬和高都是100%。使用CSS的z-index屬性將其置于容器層級的最上方，覆蓋住其他元素。

如果我們現在點擊容器中的一個元素，比如說按鈕，那它下面的overlay元素也會被觸發點擊事件，這就是“點擊穿透”造成的問題。

我們可以使用CSS的pointer-events屬性解決這個問題。它有幾個可用的值：

• auto：默認值，元素可以被鼠標事件觸發。
• none：元素不會被鼠標事件觸發，但它下面的元素仍然可以。

.overlay {
pointer-events: none;
}

通過將overlay元素的pointer-events屬性設置為none，它就不會再接收任何鼠標事件。這樣，就可以解決“點擊穿透”的問題了。

需要注意的是，pointer-events屬性并不兼容所有瀏覽器。在一些舊版本的瀏覽器中，這個屬性可能不起作用。因此，在實際使用時，需要考慮兼容性問題。