z-index为负值的元素无法点击到的解决方法为负值的元素无法点击到的解决方法
主要介绍了z-index为负值的元素无法点击到的解决方法,需要的朋友可以参考下
最近做背投广告,因为默认页面没有设置z-index,发现如果将z-index为负值的元素无法点击到,那么解决方案就是将背投广
告z-index设置为1,其它元素z-index增加。
假设有这样一个需求:
header和主区域是原来就有的,现在要在页面中加一个背景图,要求该背景图层在主区域之下,但在主区域之外的部分可点
击,是一个链接。
我简单思考了下,就知道不能用背景图实现,因为背景图是无法点击的。虽然可以勉强用js监听body点击然后根据点击位置来
判断是否是背景图发生了点击,但这未免太笨拙。于是决定在主区域下铺一层,设置z-index:-1.图片设置为bgImg的背景图。
代码如下:
<!DOCTYPE html>
<html>
<head>
<style>
.bgImg {position: absolute; z-index: -1; background: url(...) no-repeat center;}
</style>
</head>
<body>
<header></header>
<div class="bgImg"></div>
<div class="main"><div>
</body>
</html>
但是事实证明这样设置后, bgImg无法被点击到,hover时也不会显示手形,因为z-index为负值的元素将被放置在body层之
下,所以点击和hover事件都被body层覆盖了。
解决方案:解决方案:
1. z-index设为0. 主区域设为position:relative; z-index: 1;这样能保证背景层不会影响主区域,并且在主区域外的部分也可以点
击。