网页前端，下层元素被上层元素遮挡，点击无效_Html教程_奇迪科技(深圳)有限公司(www.qvdv.net)

在制作HTML网页的时候，经常会用到浮动、相对定位relative、绝对定位absolute、z-index等设置上下层元素重叠，这时这就可能会导致一个问题：如下图所示，上层元素遮挡了下层元素，致使无法点击下层元素的箭头。

解决下层元素的点击事件无法被点击触发的问题，那就需要穿透上层，使得可以触发下层点击事件，那就需要使用CSS的pointer-events属性。pointer-events 属性是一个指针属性，定义元素是否对指针事件做出反应。默认值是auto，表示元素对指针事件做出反应（可以被点击）。如果pointer-events的值是none，元素不对指针事件做出反应（即被穿透、点击事件无法被触发）。所以：

1、要穿透上层，使得下层元素能够被点击，那么就在上层添加以下CSS：

pointer-events:none;

2、上层元素的CSS设置了“pointer-events:none”后，上层的所有点击事件都无效。如果想要上层的子元素点击事件有效，只需给这些子元素添加以下CSS：

pointer-events:auto