如何解决z-index为负值的元素无法点击到的问题

本文主要介绍"怎么解决z-index为负值的元素无法点击到的问题",希望能够解决您遇到有关问题,下面我们一起来看这篇 "怎么解决z-index为负值的元素无法点击到的问题" 文章。

最近做背投广告,因为默认页面没有设置z-index,发现如果将z-index为负值的元素无法点击到,那么解决方案就是将背投广告z-index设置为1,其它元素z-index增加。
假设有这样一个需求:

如何解决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;这样能保证背景层不会影响主区域,并且在主区域外的部分也可以点击。

如何解决z-index为负值的元素无法点击到的问题

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为负值的元素无法点击到的问题" 就介绍到这。希望大家多多支持编程宝库

button内flex垂直居中不居中怎么解决:本文主要介绍"button内flex垂直居中不居中如何解决",希望能够解决您遇到有关问题,下面我们一起来看这篇 "button内flex垂直居中不居中如何解决" 文章。问题描述按钮样式为图标+文 ...