不可忽视的z-index属性

web前端1087314年前 (2011-02-16)

CSS中z-index属性的参数:

z-index auto | number
auto:默认值
number:无单位的整数,可以为负数

在含有绝对定位层的页面中,有时常常为层而苦恼,在CSS中,z-index属性可以解决这个问题。

z-index的值越大,则越显示在最上层,适用于定位元素(position:relative或absolute),用来确定元素在垂直于显示屏方向上的层叠次序,也被称作Z轴,我想大家应该都用过Photoshop处理相片或图片,这也是由若干个层构成的。

如果父元素的A(z-index:100)里面有子元素AA(z-index:500),而父元素B(z-index:200)和父元素A之间成兄弟关系,那么无论子元素AA的z-index值有多大,都会被另一个父元素B的z-index:200所覆盖,因为父元素A的z-index只有100。

在网页排版的过程中,我们不难发现,z-index的值有多大都不显示在最上面,这是一个经常会遇到的麻烦,但只要细心检查一下问题就可迎刃而解。

解决z-index在IE6浏览器下无效的三个解决思路:

一、父元素图层的position属性为relative;

二、问题图层没有position属性,(不包括static);

三、问题图层含有FLOAT属性。

以上是z-index的几个经常遇到的问题,绝对不可小视,我们掌握的CSS只是九牛身上的一毛,还有很多技术层面的只是还没有接触过,以后会一一介绍给大家。