css3 z-index:9,css中z-index层级

1.z-index简介

(1) 概念

z-index属性指定了元素与元素之间的z轴上的顺序，而z轴决定元素之间发生覆盖的层叠关系。

(2) 属性值

1.默认auto

为什么元素添加定位属性(不包括static)后会覆盖普通元素？

元素添加定位属性(不包括static)后，z-index默认是auto，在层叠水平上相当于z-index为0，但是不会产生层叠上下文，但是会比普通元素没有z-index的层级要高。

2.数值

z-index支持正负值

3.inherit

继承父元素的z-index值

2.css中的层叠上下文

(1) 概念

层叠上下文是html中的一个概念，当一个元素元素含有层叠上下文的时候，那么此元素就更靠近我们的眼睛(假如我们看一堵墙的时候，只能看到墙，后面的东西我们看不到，那这堵墙就相当于含有层叠上下文，更靠近我们，后面的东西可以看做是普通元素)。

(2) 如何产生层叠上下文？

第一种方法，页面根元素(html页面根元素就是html)天生具有层叠上下文，我们称它为“根层叠上下文”。

字体在背景上就是以页面根元素为层叠上下文为基础进行覆盖的，字体是inline元素，而background是层叠顺序最低的元素，遵循层叠顺序。

第二种方法，定位元素的z-index为数值的层叠上下文。

div{position:absolute; z-index:1;}

第三种方法，其他css的属性。

这些属性可以看做z-index为auto

z-index值不为auto的flex项(父元素display:flex|inline-flex)。

元素的opacity值不是1。

元素的transform值不是none。

元素的mix-blend-mode值不是normal。

元素的filter值不是none。

元素的isolation值不是isolate。

position:fixed声明。

元素的-webkit-overflow-scrolling为touch。

3.css中的层叠水平

在层叠上下文中往往包含很多元素，这么多元素由层叠水平来决定z轴上的先后顺序，不至于相互打架，一起相争。

4.css中的层叠顺序

层叠顺序是指不同元素相互层叠，规定先后顺序的一套规则。而层叠上下文和层叠水平都是概念。

层叠水平有七个级别！我们引用大神张鑫旭的七阶图。

图一

小栗子：

id为box的div内部包含span元素

图二

图三

根据图三我们看出，span元素由于设置负的z-index位于div后，这里我们可以从上图中块状元素覆盖z-index为负值的元素，而层叠顺序是需要在层叠上下文中，这里的层叠上下文就是根层叠上下文。

下面布局为div中有span和img元素，span在前，并且设置position:relative，图片透明度为0.7。

图四

图四我们可以看出图片在文字之上，由于span标签已经设置了position:relative，此时span标签默认z-index:auto，根据图一我们可以看出，图片层级低于z-index:auto，此时图片应该会在文字之下，这种情况就是透明度改变了图片的层级。

图五

图五所示，图片透明度为1，自然图片变成普通流中的元素，被相对定位元素span覆盖，这里的opacity我们可以换成上面如何产生层叠上下文第三种方法中的任意一个，请自行尝试。

5.z-index的层叠

(1) 不发生嵌套

没有层叠上下文，则根据DOM顺序，后面的覆盖前面的。

在有层叠上下文的时候，根据z-index的数值大小，谁大谁在上面。

(2) 发生嵌套

每个层叠上下文相当于每一个独立的个体，内部的元素无论z-index为多大，对最顶部同级的层叠上下文元素毫无影响。

图六

效果如下：

图七

子级无论z-index为何值，都不会对父级元素层级造成影响。

为了方便理解，你可以把同一层级的层叠上下文元素看做是两个不同的人，不同的人有不同的高度，你可以比较两个人的高度，但是你不能说手长身高就更高一点吧。

层叠上下文内部的其他元素的覆盖关系就是以父级为根层叠上下文，重新按照上面的规则进行覆盖。

5.z-index使用

(1) z-index的技巧

1.定位元素z-index:auto可以看成z-index:0

例如：定位元素(不包括static)的层级要比普通元素层级要高。

2.z-index不为auto会产生层叠上下文

例如：两个同级div都设置relative和z-index为数值，这两个div就会产生层叠上下文，内部元素永远不会影响到父级div的覆盖关系。

3.z-index层叠顺序终止与父级层叠上下文

(2) z-index值最好不要超过9

z-index在使用过程中，为避免一个项目多人协作产生互相覆盖的问题，所以在使用z-index的时候，不要让z-index大于9，防止同事设置弹出框或其他层级要求很高的无法覆盖。

(3) 获取最高层级

我们在用到一些插件什么的时候，有时插件有一个很高的层级，我们自定义的元素需要覆盖在其之上，这时我们可以通过js获取body内最高层级，让我们自定义的元素z-index等于最高层级的z-index+1。

下面是js获取最高层级代码，感兴趣的可以看一下。

图八

(4) 利用z-index隐藏

在模拟button和input.submit的时候，我们可以设置样式如下：

button{

position:absolute;

z-index:-1;

}

label{

background:#999;

padding:8px 16px;

line-height:30px;

color:#fff;

}

上面父级无定位z-index设置，自然不会创建层叠上下文，此时层叠上下文为根层叠上下文html，则button是以为层叠上下文根元素html来进行覆盖，由于label为inline元素，button层级为z-index负值，根据层叠顺序我们可以明白button在body上面，而label位于button之上。