在制作HTML網(wǎng)頁(yè)的時(shí)候，經(jīng)常會(huì )用到浮動(dòng)、相對定位relative、絕對定位absolute、z-index等設置上下層元素重疊，這時(shí)這就可能會(huì )導致一個(gè)問(wèn)題：如下圖所示，上層元素遮擋了下層元素，致使無(wú)法點(diǎn)擊下層元素的箭頭。

解決下層元素的點(diǎn)擊事件無(wú)法被點(diǎn)擊觸發(fā)的問(wèn)題，那就需要穿透上層，使得可以觸發(fā)下層點(diǎn)擊事件，那就需要使用CSS的pointer-events屬性。pointer-events 屬性是一個(gè)指針屬性，定義元素是否對指針事件做出反應。默認值是auto，表示元素對指針事件做出反應（可以被點(diǎn)擊）。如果pointer-events的值是none，元素不對指針事件做出反應（即被穿透、點(diǎn)擊事件無(wú)法被觸發(fā)）。所以：

1、要穿透上層，使得下層元素能夠被點(diǎn)擊，那么就在上層添加以下CSS：

pointer-events:none;

2、上層元素的CSS設置了“pointer-events:none”后，上層的所有點(diǎn)擊事件都無(wú)效。如果想要上層的子元素點(diǎn)擊事件有效，只需給這些子元素添加以下CSS：

pointer-events:auto