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;
}
<button id="btn"></button>
<label for='btn'></label>
上面父级无定位z-index设置，自然不会创建层叠上下文，此时层叠上下文为根层叠上下文html，则button是以为层叠上下文根元素html来进行覆盖，由于label为inline元素，button层级为z-index负值，根据层叠顺序我们可以明白button在body上面，而label位于button之上。
原文地址：http://www.cnblogs.com/Sultan-ST/p/16879742.html
