z-index为负值的元素无法点击到的解决方法_z-index=-1,引起点事件失效资源-CSDN文库

5星 · 超过95%的资源 48 浏览量 2020-09-22 13:03:18 上传评论收藏 56KB PDF 举报

资源推荐

资源详情

资源评论

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

击。

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余1页未读，立即下载

内容反馈

番皂泡

2023-06-13

细节方面说的很到位，有助于完善页面体验。
两斤香菜

2023-06-13

讲的很清楚，排版整洁。
内酷少女

2023-06-13

很棒的分享，希望以后能看到更多相关主题的文章。
史努比狗狗

2023-06-13

排序问题的解决方法让人眼前一亮。
易烫YCC

2023-06-13

学到了新知识，值得一看。

前往

页

weixin_38689113

粉丝: 1
资源: 974

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈

feedback-tip