鲜为人知的z-index

z-index一般理解就是设置标签在z轴先后顺序,z-index值大的显示在最前面,小的则会被遮挡,真的是这样吗?我们来一探究竟!

z-index可以设置成三个值:

  • 默认值auto。

  • 数值。指示层叠级数,可以是负值。

  • inherit。继承父元素。


层叠顺序 stacking order

HTML文档中的每个元素都能在文档中其它元素的之前或者之后。这就是所谓的层叠顺序。

层叠顺序不是z-index独有的,每个元素都有层叠顺序,元素渲染的先后顺序跟它有很大关系。

当元素发生层叠时,元素的层级高的会优先显示在上面,层级一样的则会根据dom的先后顺序进行渲染,后面的会覆盖前面的。

QQ图片20160507141037.png



试试看不用z-index来改变元素层叠顺序,


<style>
    #box1{
        background: red;
        width: 200px;
        height: 200px;
        display:inline-block;
    }
    #box2{
        background: yellow;
        width: 200px;
        height: 300px;
        margin-top:-200px;
    }
      
</style>
<div id="box1"></div>
<div id="box2"></div>

1.png


这里只做了细微的修改,就是给box1加了一个display:inline-block;的样式,从七阶图中看出,display:block的元素的层叠水平低于display:inline-block的元素,所以浏览器就将box2渲染到box1上面。




层叠上下文 stacking context

一组拥有公共父级的元素在层叠顺序中一起上移或者下移被称为层叠上下文。透彻的理解层叠上下文是真正掌握z-index和层叠顺序如何工作的关键所在。

每个层叠上下文有一个单独的HTML元素作为它的根元 素。当一个新的层叠上下文在一个元素上形成的时候,层叠上下文将其所有的子元素都限制在层叠顺序的一个特定位置。这意味着如果一个元素被层叠 顺序底部的一个层叠上下文所包含,将没有办法将其置于另一个不同的具有更高层叠顺序的层叠上下文中包含的元素之前,即便这个元素有无限大的z-index值。

在一个元素上形成层叠上下文有如下方式:

  • 当一个元素是文档的根元素(<html>元 素)

  • 当一个元素有除static之外的position属性值且z-index值不为auto

  • 当一个元素有小于1的opacity值

  • 当一个元素的transform不等于none

前两种形成层叠上下文的方式很有意义,且一般Web开发者都能够理解(即使他们不知道它们的叫法)。



结合七阶图,最下层background便是建立在层叠上下文的基础上的,也就是说在层叠上下文中,所有的元素都会渲染在该元素的层叠上下文背景和边框上面;因而在block、float元素等不存在层级上下文的元素中,当子元素设置z-index为负时,子元素会被父元素遮挡。


<style>
    #box1{
        position: relative;
        width: 200px;
        height: 200px;
        background: red;
    }
    #box2{
        position: relative;
        z-index:-1;
        width: 100px;
        height: 300px;
        background: yellow;
    }
</style>
 
<div id="box1">
   <div id="box2"></div>
</div>

222.PNG

这里,box并没有创建层叠上下文,当子元素box2设置z-index:-1时,box2所在的层叠上下文是根元素,即html根标签,根据七阶图可以看出,box2会渲染在html标签上面,box1(z-index:auto)下面,所以box2被遮挡了。


那么怎么解决这个问题呢?

简单吧,为box1建立一个层叠上下文(比如设置z-index:1;)即可,box1中的元素无论z-index是负的多少,都会显示在box1的背景之上,

如图:

222222.PNG


这里我用了前面说的的第一种方式去创建层叠上下文,即定位元素中z-index不为auto的元素会建立层叠上下文。

为什么box1的z-index小于box2的z-index,box2却显示在box1上面呢?


层叠水平仅在同一父级层叠上下文中进行比较,即层叠上下文box1中的子元素的层叠水平不会和另一个层叠上下文中的元素进行比较,当然也不会和box1自己比较。


所以文章开头的问题,答案是否定的。


总结:

  1. 理解七阶图

  2. z-index仅在设置position不等于static的元素中有效

  3. z-index层叠水平的比较仅限于同一级别的层叠上下文中




鲜为人知的z-index
https://github.13sai.com/2016/05/07/42/
作者
13sai
许可协议