Css中Z-index属性详解

提及 Z-index 属性它只能在给定的环境下才工做。 Z-index属性 也确定的比其余任何属性都会频繁的致使（兼容性）上的混乱，一旦你真正理解了 Z-index属性 ，你会发现它倒是一个很是方便且容易使用的属性。

 

Z-index属性决定了一个HTML元素的层叠级别。元素层叠级别是相对于元素在Z轴上（与X轴Y轴相对照）的位置而言。一个更高的Z-index值意味着这个元素在叠层顺序中会更靠近顶部。这个层叠顺序沿着垂直的线轴被呈现。以下图，更能清楚的代表意思。

 

下面先来看一下z-index属性的值：

 

z-index:auto | number

auto: 默认值

number: 无单位的整数值，可为负数。

z-index 值较大的元素将叠加在 z-index 值较小的元素之上，对未指定此属性的定位对像， z-index 值为正数的对象会在其之上，而 z-index 值为负数的地像在其之下。

 

下面来说讲：

定位元素间的Z值比较及z-index在不一样浏览器下默认值的影响

在ie下默认值(缺省)为：z-index:0; 而FF下则缺省为：z-index:auto;

 

1. z-index正是IE/FF下这一点区别致使ie,ff下z值的不一样表现。  

2. 正常状况下：兄弟（同级）元素后者居上，父子之间子高于父。  

3. 对于定位元素，（不论IE仍是FF）非同级关系和非父子关系元素之间的Z值大小比较，需要回溯至其为兄弟关系的两个祖先元素上，先比较这两个元素的z- index值，只有当“兄”的z-index大于“弟”的z-index值，“兄”的各个后代元素，才能超过“弟元素”及其子孙元素。

4. 对于IE,元素的z-index缺省值是0，若是不另外设置“兄”，“弟”元素的z-index值，那么”兄”的z-index就没法大于“弟”的z- index。那么”兄”元素及其子孙就没法盖过”弟”元素及其子孙。而一旦“兄”的z-index大过了”弟”元素的z-index,那么状况就翻转了，“弟”元素及其子孙将没法盖过“兄”元素及其子孙。
而对FF,元素的z-index缺省值是auto,auto的意思是什么，就是说“随便，不关我事”，那么子孙们的z值等级就只跟他们本身自己的z-index有关了。

 

实例分析请到OECP社区http://www.oecp.cn/hi/listly/blog/456下载。