常春岛资源网 Design By www.syssdc.com
最近做背投广告,因为默认页面没有设置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了).所以背景层不会占据文档流的空间, 同时还可以被点击到.
假设有这样一个需求:
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了).所以背景层不会占据文档流的空间, 同时还可以被点击到.
标签:
z-index,负值,无法点击
常春岛资源网 Design By www.syssdc.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
常春岛资源网 Design By www.syssdc.com
暂无评论...
更新日志
2024年05月20日
2024年05月20日
- dnf角色名字
- 舅舅党爆料《星空》或将登陆P55平台!今年圣诞节上线
- 《方舟》开发商确定裁员6人!新作承诺不会受到影响
- 中式恐怖续作《纸嫁衣7》首曝PV公布!现已开启预约
- 周建军-老三骑驴.2017【FLAC】
- 谭维维.2007-耳界【天娱传媒】【WAV+CUE】
- 逃跑计划.2021-回到海洋【东亚星光】【FLAC分轨】
- 《对马岛》击败《战神》《蜘蛛侠》:同时在线最高单机
- 人民日报评《歌手》全开麦直播:抛去滤镜难能可贵
- 《DNF手游》可以下载了:现已开放角色创建
- 群星《醉爱对唱》[WAV+CUE][523M]
- 孟庭苇《留住这一刻》4CD[WAV+CUE][2.5G]
- 张杰《第1张》首版 [WAV+CUE][412M]
- 《永劫无间》反击《王者荣耀》:武道无穷,但请尊重“武道”
- 《星之破晓》回应《永劫无间》:蹭蹭精,莫挨,不欢迎!