在外面玩了一会儿,回到家就11点50了。。又一次要错过Webpack了。。这个还是需要一段时间的用心做demo以及认真专心的看书的。。时间不多,就继续看一篇书签中想看的文章吧。
先看的是这篇,是张鑫旭大神的CSS相对定位|绝对定位(五)之z-index篇
- 首先z-index只在position不为static的时候才会起作用。
- z-index值越大,css层级所处也就越上。
上述这两个应该都知道,也就不多说了。
在读文章的时候我觉得有一句话非常深入人心
N多个z-index之后,网站前端换人之后,页面的z-index层级混乱了,为了让新添加元素上面显示,不惜设置z-index的值为999或是9999等。这就好比球队,人人都想当老大,最后结果是个很有味道的屎。
虽然话不算好听,但是现在确实就是这么个情况。我们项目的模态框用的是bootstrap的modal,可是在这个名为modal的class上是自带一个z-index=1050的,以至于之后的我们想在上面显示的确认框、消息提示等的z-index都大于1050,很多直接写在了9999这个数值上。同时一些乱七八糟的东西影响下,在项目中z-index相当混乱了。
改进方案是检查一下使用了z-index的地方,能不使用就不使用。
position属性中的“后来居上”这个显示规则是没有兼容性问题的,所以,要想一个元素上面显示,直接放后面就可以了,无需z-index。
借用一句话:
泛滥的z-index既浪费代码,又不利于后期维护和他人接受,为何不扔掉呢。记住,这个世界上本没有z-index。
另外尽量将那些需要浮动在上面的归个类,尽量只简单实用1,2,3即可,顺便分个类,只要让需要在上面的显示在上方即可,这样还更方便,代码也更易读。
顺便推荐另一篇文章元素重叠及position定位的z-index顺序