并非然并卵的z-index

最近做一些东西的时候总觉得加上z-index和不加对于最终的显示结果并没有什么区别，开始以为一张图片把z-inde的值调小一点儿，就可以当做背景图片一样使用，跟background是一样的，在试过几次之后发现z-index不起作用，于是乎~就找了一些资料，在这里汇总一下。

1.z-index与background的区别

z-index是值较大的元素将叠加在z-index值较小的元素之上的，如果未指定此属性的定位对象，z-index 值为正数的对象会在其之上，而 z-index 值为负数的对象在其之下。
而background是背景，可以做一些排版，放在一个盒子里设置长宽和定位。

2.z-index为什么不起效果？

情况一：有的人看书不仔细就会产生一个盲区，可以说是没有注意到关于z-index的作用范围吧，想要z-index起作用，必须让他成为定位元素，说的简单点，就是z-index只能使用在position为absolute或relative的元素上才有效。

情况二：父标签的position的属性为relative。可以将父标签的属性改为absolute。

情况三：标签含有浮动属性。由于有浮动之后元素不会在原定的地方显示，因此去掉浮动即可。

特殊情况：IE6下，层级的表现有时候不是看子标签的z-index多高，而要看整个DOM tree（节点树）的第一个relative属性的父标签的层级。

eg:IE7与IE6有着同样的bug，原因很简单，虽然图片所在div当前的老爸层级很高(1000)，但是由于老爸的老爸不顶用，可怜了9999如此强势的孩子没有出头之日啊！，代码如下:

1	<</code>DIV style="POSITION: relative">

2	<</code>DIV style="POSITION: relative; Z-INDEX: 1000">

3	<</code>DIV style="POSITION: absolute; Z-INDEX: 9999"> <</code>IMGsrc="http://www.yuanchuang.net/uploads/allimg/131101/1A3194V7-1.jpg"> </</code>DIV>

4	</</code>DIV>

5	</</code>DIV>

解决办法： 在第一个relative属性加上一个更高的层级（z-index:1），代码如下:

1	<</code>DIV style="POSITION: relative; Z-INDEX: 1">

2	<</code>DIV style="POSITION: relative; Z-INDEX: 1000">

3	<</code>DIV style="POSITION: absolute; Z-INDEX: 9999"> <</code>IMGsrc="http://www.yuanchuang.net/uploads/allimg/131101/1A3194V7-1.jpg"> </</code>DIV>

4	</</code>DIV>

5	</</code>DIV>

3.z-index的最大值与最小值

经常会看到z-index：999 这表示某个元素的显示在前面的优先级参数为999。然而999并不是他的最大值，下面将来探究一下z-index的最大值在不同浏览器下的值究竟的多少。

IE FireFox Safari的z-index最大值是2147483647 。 
Opera的最大值是2147483584.。 
IE Safari Opera在超过其最大值时按最大值处理。 
FireFox 在超过最大值时会数据溢出正负不定,但有一点可以肯定绝对不会高于2147483647层

最小值 
IE FireFox Safari的z-index最小值是-2147483648 
Opera的z-index最小值-2147483584 
FireFox在-2147483648<=z-index<0时层不显示 在z-index<-2147483648时溢出实际数字正负不定 
IE Safari Opera在z-index<0时显示,在小于其最小值时都按其最小值处理

等值时表现 
各个浏览器当两个层z-index相同时,按网页代码中层出现的顺序,后出现的层高于先出现的层。 
跨浏览器永远最大：2147483647 
跨浏览器永远最小：Hack(”IE,Safari,Opera”:-2147483648,”FireFox”:0)