源码网,源码论坛,源码之家,商业源码,游戏源码下载,discuz插件,棋牌源码下载,精品源码论坛

 找回密码
 立即注册
楼主: ttx9n

[心得技巧] z-index为负值的元素无法点击到的解决方法

[复制链接]

7万

主题

861

回帖

32万

积分

论坛元老

Rank: 8Rank: 8

积分
329525
发表于 2016-10-27 20:37:48 | 显示全部楼层 |阅读模式
这篇文章主要介绍了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;这样能保证背景层不会影响主区域,并且在主区域外的部分也可以点击。



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了).所以背景层不会占据文档流的空间, 同时还可以被点击到.
回复

使用道具 举报

4

主题

2万

回帖

262

积分

中级会员

Rank: 3Rank: 3

积分
262
发表于 2022-8-20 19:28:14 | 显示全部楼层
激动人心,无法言表!
回复 支持 反对

使用道具 举报

0

主题

2万

回帖

0

积分

中级会员

Rank: 3Rank: 3

积分
0
发表于 2023-4-23 03:27:49 | 显示全部楼层
大家都不容易!
回复 支持 反对

使用道具 举报

0

主题

2万

回帖

0

积分

中级会员

Rank: 3Rank: 3

积分
0
发表于 2023-8-9 19:21:18 | 显示全部楼层
而非为吾问无为谓娃娃
回复 支持 反对

使用道具 举报

29

主题

2万

回帖

194

积分

注册会员

Rank: 2

积分
194
发表于 2023-9-14 23:17:20 | 显示全部楼层
先把创新班才能下班才能下班
回复 支持 反对

使用道具 举报

0

主题

1万

回帖

0

积分

中级会员

Rank: 3Rank: 3

积分
0
发表于 2023-11-17 00:36:12 | 显示全部楼层
这个源码还可以
回复 支持 反对

使用道具 举报

2

主题

1万

回帖

146

积分

注册会员

Rank: 2

积分
146
发表于 2024-3-2 03:45:53 | 显示全部楼层
撒房产税陈飞飞
回复 支持 反对

使用道具 举报

13

主题

2万

回帖

97

积分

注册会员

Rank: 2

积分
97
发表于 2024-4-2 14:47:09 | 显示全部楼层
儿童服务绯闻绯闻绯闻
回复 支持 反对

使用道具 举报

3

主题

2万

回帖

50

积分

注册会员

Rank: 2

积分
50
发表于 2024-7-24 10:16:07 | 显示全部楼层
源码源码源码源码源码源码源码源码源码源码源码源码源码
回复 支持 反对

使用道具 举报

1

主题

2万

回帖

176

积分

注册会员

Rank: 2

积分
176
发表于 2024-8-20 05:21:03 | 显示全部楼层
的vgdsvsdvdsvdsvds
回复 支持 反对

使用道具 举报

高级模式
B Color Image Link Quote Code Smilies

本版积分规则

手机版|小黑屋|网站地图|源码论坛 ( 海外版 )

GMT+8, 2024-11-29 02:21 , Processed in 0.120454 second(s), 25 queries .

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表