当relative遇上z-index，半透明度不阻断事件捕获
今天在做页面的时候，遇到一个li点点击事件无法触发的问题，在一步步console，发现添加事件的代码正确运行，切打印添加事件的对象没有错之后，
我就检查是否有透明的元素遮住了它，发现也并没有啊。于是我给li加上cursor: pointer; 惊悚地发现鼠标移上去的确不变手。然后我又惊悚地发现，我在li的样式中有一个z-index:-1; 于是我把z-index去掉，li鼠标在li上顺利变成了一只手。后面我发现，原来真正的原因是还有哟个position：relative；
当把li的position设为relative的时候，li已经脱离的文档流了，此时ul只是在文档结构中是li的父元素，而li在流中并不认ul作为父元素，就相当于li是在ul的外面定义的，所以li和ul比较层叠上下文的时候，就不存在父子关系（遵循后来居上和z-index的原则）修改于2016-11-18---是在offset层上不存在父子关系，具体什么是offset上的父子关系，......且看下文....。所以，z-index:-1;加上position:relative;会被父类覆盖，当然就加不了事件，之前我还一直天真以为relative的元素，还会认文档结构的父元素当爸爸（offsetparent），没想到relative元素也是暴脾气啊。以下是测试
ul{
/*background-color: aqua;*/
/*opacity: 0.6;*/
/*float: left;*/
/*position: relative;*/
}
ul>li{
display: inline-block;
width: 100px;
height: 100px;
z-index: -1;
margin: 10px 10px;
background-color: #1977a1;
position: relative;
cursor: pointer;
}
效果如下：
看起来似乎没有什么问题，但是这个时候，li的hover：pointer在鼠标移上去的时候，并没有效果，点击事件也没效果。把relative或z-index:-1;中任何一个去掉，li的事件和hover（变手）都有效。
本来事情到这里就该结束了，可我又发现一个很神奇的事情，当我设置ul的透明度不为1的时候，鼠标又可以投过ul，触发li的hover和事件，代码如下
<style> ul{ background-color: aqua; opacity: 0.9; /*float: left;*/ /*position: relative;*/ } ul>li{ display: inline-block; width: 100px; height: 100px; z-index: -1; margin: 10px 10px; background-color: #1977a1; position: relative; cursor: pointer; } </style> <script> $(function(){ $("li").on("click",function(){ alert("你点击了li哦"); }); }); </script>
点击的时候有触发事件：
为什么会这样呢，难道透明度不为1的元素，对鼠标事件也是透明的么。我不太认同这个看法，于是我又用了一个跟ul和li没有半毛钱关系的div来遮住他们，并且设置透明度为0.5，看看他们的是否能穿透鼠标事件：代码
<head> <meta charset="utf-8"> <title>ces</title> <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script> </head> <body> <style> ul{ background-color: aqua; opacity: 0.9; /*float: left;*/ /*position: relative;*/ } ul>li{ display: inline-block; width: 100px; height: 100px; z-index: -1; margin: 10px 10px; background-color: #1977a1; position: relative; cursor: pointer; } div{ background-color: antiquewhite; opacity: 0.5; position: absolute; top: 0px; left: 0px; height: 200px; width: 100%; } </style> <script> $(function(){ $("li").on("click",function(){ alert("你点击了li哦"); }); }); </script> <ul> <li>我是li</li> <li>我是li</li> <li>我是li</li> <li>我是li</li> </ul> <div></div> </body>
效果如下，无论，你怎么点击，都触发不了事件：
所以，我断定，透明度不唯一的时候，可以正确地捕获事件，但这个不是穿透，只是可以捕获到子类，所以能触发事件。而透明度为1的时候，捕获不到对象。因为hover和事件的触发关系都是在文档结构的位置决定的，而不是在流中的位置（或者说页面中的位置）决定的。
而元素，只要没有关系的元素，覆盖住另一个元素，就会阻断被覆盖元素的事件，就算覆盖的元素透明度为0（经过测试）。
