首页 > web前端 > 不可忽视的z-index属性

不可忽视的z-index属性

2011-02-16 toyean web前端 1人评论 5117人浏览

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只是九牛身上的一毛,还有很多技术层面的只是还没有接触过,以后会一一介绍给大家。

打赏

评论列表

呼噜呼噜  6年前 (2012-03-20) 回复该评论
误人子弟 z-index:100px 怎么会有px单位
toyean  6年前 (2012-03-21) 回复该评论
一年前的文章,不知道当时在想什么,竟然自己忽视了这个z-index属性。
toyean
toyean

发表评论

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

拓源网官方微信
关注拓源网微博
476590949
09:00 - 18:00
拓源网QQ群: 491920017
客服邮箱: