今天在做移动端web页面开发的时候，由于UI方案的设计图需要部分层叠的效果，所以使用z-index，存在这种情况：使用z-index为负数实现了层叠效果，但是由于底层存在事件，但是由于z-idnex为负数，所以该块级元素处于body之下，导致事件无法触发，修改z-index为正，但是存在大小顺序之后可以触发事件，但是没有了层叠效果。查阅资料之后，发现了自己对z-index的了解存在误区。

    上面是在w3c上的解释用法，之前没有具体了解，现在才发现上面指的定位元素就是指position的取值为absolute fixed relative的元素。其他的元素上面z-index无效。
    查阅资料发现，还有两个条件下也能导致这个问题的出现：
    1、父标签 position属性为relative；
    2、问题标签含有浮动(float)属性；
    解决方法也很简单：
    1、position:relative改为position:absolute；
    2、去除浮动。
    还有一种比较特殊的情况也会导致这个问题：
    IE6、IE7下，层级的表现有时候不是看子标签的z-index多高，而要看整个DOM tree（节点树）的第一个relative属性的父标签的层级。
    解决方法也很简单： 在第一个relative属性加上一个更高的层级就可以了。