div+css网页设计里面z-index为什么会产生混乱?
虽然在网页设计中Z-index并不是一个难以理解的属性,但它却会因错误的假设而使很多初级的开发人员陷入混乱。混乱发生的原因是因为Z-index只能工作在被明确定义了absolute,fixed或relative 这三个定位属性的元素中。
下面小编Q群162542073就为了证明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
网络营销公开课