2024年5月24日发(作者：)

css层遮挡无法点击解决csspointer-events绝对定位层遮挡

的问题解决办法

本文章来给各位同学介绍关于在css pointer-events绝对定位层

遮挡的问题解决办法，各位同学不防进入参考。

在没有背景和图片填充的情况下，火狐和Chrome下不能直接点

击绝对定位层下面的元素（比如链接），下面的链接被上面的绝对定

位层挡住了。在IE里面是可以直接点击绝对定位层下面的链接。

对于这种问题需要用到一个css3的属性，可以通过给绝对定位的

层多加一个样式 pointer-events:none; 以后， 绝对定位层下的元素就

可以点击了。

光给绝对定位的层添加pointer-events:none; 的样式是不够的，

你可以发现所有在此层里的元素，都不能点击了，就连链接和按钮也

同样不起作用，所以我们需要给绝对定位层中的其他非空的元素把样

式再返回。

给里面的元素重新设置为 pointer-events:auto，只给需要操作的

元素区域设置即可。

查看演示页面

pointer-events属性有很多值：

pointer-events: auto | none | visiblePainted | visibleFill |

visibleStroke | visible | painted | fill | stroke | all | inherit

但是对于浏览器来说，只有auto和non两个值可用，其它的几个

是针对SVG的(本身这个属性就来自于SVG技术)。

下面介绍一下pointer-events这两个属性值详细描述

auto——效果和没有定义pointer-events属性相同，鼠标不会穿

透当前层。在SVG中，该值和visiblePainted的效果相同。

none——元素不再是鼠标事件的目标，鼠标不再监听当前层而去

监听下面的层中的元素。但是如果它的子元素设置了pointer-events

为其它值，比如auto，鼠标还是会监听这个子元素的。

其它属性值为SVG专用，这里不再多介绍了。

对于浏览器兼容的问题：Firefox 3.6+和chrome 2.0+ 以及safari

4.0+都支持这个CSS3属性。

例子

代码如下 复制代码