设置z-index

在一个div明明设置了属性z-index，但是为什么在网页上显示无效呢？首先排除设置的层级不够的问题；然后我就去W3School 查询了才知道问题所在。 

先来看官方给的定义的用法：

z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。 
注释：元素可拥有负的 z-index 属性值。 
注释：Z-index 仅能在定位元素上奏效（position属性值设置除默认值static以外的元素，包括relative，absolute，fixed样式）

注意看我加粗的那句话！！！然而这只是诸“元凶之一”，我查阅了一下别的资料，还有两个条件下也能导致这个问题的出现： 
* 1、父标签 position属性为relative；* 
* 2、问题标签含有浮动(float)属性；* 
解决方法也很简单： 
1、position:relative改为position:absolute； 
3、去除浮动。 
还有一种比较特殊的情况也会导致这个问题： 
IE6 、IE7下，层级的表现有时候不是看子标签的z-index多高，而要看整个DOM tree（节点树）的第一个relative属性的父标签的层级。（万恶的IE6啊~ ） 

解决方法也很简单： 在第一个relative属性加上一个更高的层级就可以了。

在设置z-index的时候要注意:给子元素设置z-index无效的时候,就要去检查父元素是否设置过z-index