鲜为人知的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>

这里只做了细微的修改，就是给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>