今天在调试前端页面的时候，发现addflowrank这个元素的click事件不能触发了。下图是它的元素结构。

用开发者工具试图定位这个元素，看看它到底怎么了。发现：无论我怎么用光标定位这个元素都定位不到，像是被外层div锁在里面了。我开始以为是不是什么冒泡机制在作怪，调试了一会发现不对。

我看见父div上有position：relative  和 z-index。我看是不是父级标签层次太高了，我就调负数，发现还是不能解决问题。

css的positon我总是模模糊糊的在脑子里。

其实他的几个值是这样的：

  • static: HTML元素的默认定位方式
  • absolute: 将对象从文档流中拖出，使用left，right，top，bottom等属性进行绝对定位。而其层叠通过z-index属性定义。绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>
  • relative: 对象不可层叠，但将依据left，right，top，bottom等属性在正常文档流中偏移位置
  • fixed: 元素的位置相对于浏览器窗口是固定位置, 即使窗口是滚动的它也不会移动

问题其实是出在relative和z-index之间。

当把外层div（记为div1）的position设为relative的时候，这个div1已经脱离的文档流了，此时div1只是在文档结构中是内层要触发事件的div（记为div2）的父元素，

而div2在流中并不认div1作为父元素，就相当于div2是在div1的外面定义的，所以div2和div1比较层叠上下文的时候，就不存在父子关系（遵循后来居上和z-index的原则）是在offset层上不存在父子关系，

所以，z-index:-1;加上position:relative;会被父类覆盖，当然就加不了事件，之前我还一直天真以为relative的元素，还会认文档结构的父元素当爸爸

事件的触发关系都是在文档结构的位置决定的，而不是在流中的位置（或者说页面中的位置）决定的。

而元素，只要没有关系的元素，覆盖住另一个元素，就会阻断被覆盖元素的事件，就算覆盖的元素透明度为0（经过测试）。

当relative遇上z-index，阻断事件捕获的更多相关文章

  1. 【转载】浅谈事件冒泡与事件捕获 - javascript 事件代理

    原文:https://segmentfault.com/a/1190000000749838 事件冒泡与事件捕获 事件冒泡和事件捕获分别由微软和网景公司提出,这两个概念都是为了解决页面中事件流(事件发 ...

  2. JavaScript事件流--事件冒泡、目标与事件捕获

    1.事件冒泡 微软提出了名为事件冒泡的事件流.事件冒泡可以形象地比喻为把一颗石头投入水中,泡泡会一直从水底冒出水面.也就是说,事件会从最内层的元素开始发生,一直向上传播,直到document对象. 因 ...

  3. 前端遇上Go: 静态资源增量更新的新实践

    前端遇上Go: 静态资源增量更新的新实践https://mp.weixin.qq.com/s/hCqQW1F8FngPPGZAisAWUg 前端遇上Go: 静态资源增量更新的新实践 原创: 洋河 美团 ...

  4. SQL SERVER 2008 R2 SP1更新时，遇上共享功能更新失败解决方案

    SQL SERVER 2008 R2 SP1更新时,遇上共享功能更新失败的问题,可作如下尝试: 更新失败后,在windows的[事件查看器→应用程序]中找到来源为MsiInstaller,事件ID为1 ...

  5. bootstrap fileinput添加上传成功回调事件

    国外牛人做的bootstrap fileinput挺酷的,但是可惜没有提供自定义上传成功回调事件的接口,因此感到非常头疼,但是很幸运的是,我在网上搜索到一个提问帖子,它问到使用Jquery的on函数绑 ...

  6. Ext JS treegrid 发生的在tree上增加itemclick 与在其它列上增加actioncolumn 发生事件冲突(event conflict)的解决办法

    Ext JS treegrid 发生的在tree上增加itemclick 与在其它列上增加actioncolumn 发生事件冲突(event conflict)的解决办法 最近在适用Ext JS4开发 ...

  7. 当锚点定位遇上position: fixed

    <!DOCTYPE html><html> <head> <title>当锚点定位遇上position: fixed</title> < ...

  8. 当微信小程序遇上filter~

    在微信小程序的开发过程中,当你想要实现不同页面间的数据绑定,却为此抓耳饶腮时,不妨让微信小程序与filter 来一场完美的邂逅,相信会给你带来别样的惊喜~ 前段时间被安利了一个很实用的公众号-前端早读 ...

  9. 微服务中台落地 中台误区 当中台遇上DDD，我们该如何设计微服务

    小结: 1. 微服务中台不是 /1堆砌技术组件就是中台 /2拥有服务治理就是中台 /3增加部分业务功能就是中台 /4Cloud Native 就是中台 https://mp.weixin.qq.com ...

随机推荐

  1. Unity 向量点乘、叉乘

    向量点乘计算角度,向量叉乘计算方位 a,b为向量 点乘计算公式:a x b = |a| x |b| x cosθ 叉乘计算公式:a x b = |a| x |b| x sinθ

  2. Kattis - How Many Digits?

    How Many Digits? Often times it is sufficient to know the rough size of a number, rather than its ex ...

  3. Jquery 过滤器(first,last,not,even,odd)的使用和区别

    Jquery 过滤器主要有first,last,not,even,odd等等,它们分别表示: 代码如下: $(function(){ $("#menu li:first").cli ...

  4. jenkins 展示报告

    1.下载插件 HTML Publisher plugin 2.设置说明 3.展示css 下载插件 (1).Startup Trigger: 可实现在Jenkins节点(master/slave)启动时 ...

  5. shell脚本切割tomcat日志文件

    转自:http://www.cnblogs.com/lishun1005/p/6054816.html 鉴于在调试logback和log4j的文件切割一直无法成功,随性用shell写个脚本用来切割to ...

  6. Facebook再次爆出安全漏洞，9000万用户受影响

    今年上半年开始,美国社交媒体Facebook因数据泄露事件和涉嫌操纵选举等问题频繁接受听证会拷问,然而事情却远没有结束.今年9月Facebook再次爆出安全漏洞,导致9000万用户可能受到影响. 根据 ...

  7. [HDU1052]Tian Ji -- The Horse Racing(田忌赛马)

    题目大意:田忌赛马问题,给出田忌和齐威王的马的数量$n$和每匹马的速度$v$,求田忌最多赢齐威王多少钱(赢一局得200,输一局扣200,平局不得不扣). 思路:贪心. 1.若田忌最慢的马可以战胜齐王最 ...

  8. PHP下的异步尝试三：协程的PHP版thunkify自动执行器

    PHP下的异步尝试系列 如果你还不太了解PHP下的生成器和协程,你可以根据下面目录翻阅 PHP下的异步尝试一:初识生成器 PHP下的异步尝试二:初识协程 PHP下的异步尝试三:协程的PHP版thunk ...

  9. Qt Designer设计 UI 文件并调用

    本文介绍的是Qt Designer设计 UI 文件并调用,在坛子里逛了一圈,关于UI方面的好像不怎多,本篇给大家分享一下. AD: 2013云计算架构师峰会超低价抢票中 Qt Designer设计 U ...

  10. GitHub上传项目，使用desktop（客户端）教程

    GitHub上传项目,使用desktop(客户端)教程  搜索“GitHub上传项目”,能得到很多相关的文章教程,里面讲的都特别麻烦,要弄什么ssh之类的,可算是吓坏了我,使我非常的怀疑为什么GitH ...