网页设计 加入小组

2个成员 62个话题 创建时间:2014-10-20

div+css网页设计里面z-index为什么会产生混乱?

发表于 2014-11-05 944 次查看

div+css网页设计里面z-index为什么会产生混乱?


虽然在网页设计中Z-index并不是一个难以理解的属性,但它却会因错误的假设而使很多初级的开发人员陷入混乱。混乱发生的原因是因为Z-index只能工作在被明确定义了absolute,fixed或relative 这三个定位属性的元素中。
下面小编Q162542073就为了证明Z-index只能工作于被定位了的元素中,这里有同样的三个BOX,它们应用了Z-index属性来尝试打破他们自然的层叠顺序。

 

灰色的BOX具有“9999”的Z-index值,蓝色的BOX有“500”的Z-index值,金色的有“1”的Z-index值。合乎逻辑的,你会认为这三个BOX的层叠顺序会倒过来。但事实却不是这样,因为这些元素都没被设定position属性。
下面是同样的三个BOX,分别都被设置了position: relative,他们的Z-index值还是按照上面那段设定。

 

现在的结果是我们所期待的了:这些元素的层叠顺序实现了反向;灰色的BOX覆盖在蓝色之上,蓝色的覆盖在金色之上。

 

更多视频教程请前往51rgb官网http://www.51rgb.com

豆瓣 网站网页设计小组

http://www.douban.com/group/520499/

 奋斗的新浪博客

http://blog.sina.com.cn/u/1748316330

帆的QQ空间

http://user.qzone.qq.com/113125174/main

PS 基础学习视频

http://pan.baidu.com/s/1kTmNFbp

AI 基础学习视频

http://pan.baidu.com/s/1ntHlQQ1

DW网页制作 基础学习视频

http://pan.baidu.com/s/1c0vlIQ8

网络营销公开课

http://pan.baidu.com/s/1kTHVR0N

发表回复
功能维护升级中,维护完成完后将再次开放,非常抱歉给您学习造成的不便。
话题作者
51RGB教育
头衔:
活跃成员