欢迎来到奇迪科技(深圳)有限公司,超值服务提供卓越产品!
网页前端,下层元素被上层元素遮挡,点击无效_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
本文版权所有,转载须注明:来源 https://www.qvdv.net/qvdv-wdl-889.html