HTML标签中设置z-index上下层关系属性无效

z-index简介

z-index是针对网页显示中的一个特殊属性。因为显示器是显示的图案是一个二维平面，拥有x轴和y轴来表示位置属性。为了表示三维立体的概念如显示元素的上下层的叠加顺序引入了z-index属性来表示z轴的区别。表示一个元素在叠加顺序上的上下立体关系。

最近在做项目的时候遇到使用z-index的时候不起作用，才知道z-index的使用规则：

第一种情况(z-index无论设置多高都不起作用情况)：
原因有三个：
1、父标签 position属性为relative；
2、问题标签无position属性(不包括static)；
3、问题标签含有浮动(float)属性。z-index层级不起作用，浮动会让z-index失效

解决：z-index 仅能在定位元素上生效，所以给div的style加上z-index:-1的同时，要记得加上position:absolute;或者position:fixed;，才能生效。

第二种情况:
IE6下，层级的表现有时候不是看子标签的z-index多高，而要看整个DOM tree(节点树)的第一个relative属性的父标签的层级。
原因：IE7与IE6有着同样的bug，原因很简单，虽然图片所在div当前的老爸层级很高(1000)，但是由于老爸的老爸不顶用，可怜了9999如此强势的孩子没有出头之日啊！

解决：在第一个relative属性加上一个更高的层级(z-index:1)