重庆分公司
重庆分公司，新征程启航
为企业提供网站建设、域名注册、服务器等服务
如何解决z-index为负值的元素无法点击到的问题
这篇文章将为大家详细讲解有关如何解决z-index为负值的元素无法点击到的问题，文章内容质量较高，因此小编分享给大家做个参考，希望大家阅读完这篇文章后对相关知识有一定的了解。
创新互联成立与2013年，是专业互联网技术服务公司，拥有项目成都网站制作、做网站网站策划，项目实施与项目整合能力。我们以让每一个梦想脱颖而出为使命，1280元耿马做网站,已为上家服务,为耿马各地企业和个人服务,联系电话:028-86922220
最近做背投广告，因为默认页面没有设置z-index，发现如果将z-index为负值的元素无法点击到，那么解决方案就是将背投广告z-index设置为1，其它元素z-index增加。
假设有这样一个需求：
header和主区域是原来就有的，现在要在页面中加一个背景图，要求该背景图层在主区域之下，但在主区域之外的部分可点击，是一个链接。
我简单思考了下，就知道不能用背景图实现，因为背景图是无法点击的。虽然可以勉强用js监听body点击然后根据点击位置来判断是否是背景图发生了点击，但这未免太笨拙。于是决定在主区域下铺一层，设置z-index:-1.图片设置为bgImg的背景图。代码如下：
但是事实证明这样设置后, bgImg无法被点击到，hover时也不会显示手形，因为z-index为负值的元素将被放置在body层之下，所以点击和hover事件都被body层覆盖了。
解决方案：
1. z-index设为0. 主区域设为position:relative; z-index: 1;这样能保证背景层不会影响主区域，并且在主区域外的部分也可以点击。
2.结构与1一样，只是实现方式不同。不使用position，而是使用负margin-bottom实现：
背景层 {height: 500px; margin-bottom: -500px;}
主区域不用做任何改动.
原理是负的margin-bottom会将下方的元素拉上来,背景层的高度= height + padding-top + padding-bottom + border-top-width + border-bottom-width + margin-top+ margin-bottom = 0. (没设置的属性在reset.css中一律被重置为0了).所以背景层不会占据文档流的空间, 同时还可以被点击到.
关于如何解决z-index为负值的元素无法点击到的问题就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。
网页标题：如何解决z-index为负值的元素无法点击到的问题
本文URL：http://cqcxhl.com/article/pjcges.html