CSS中Z-index属性
z-index属性的定义是设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
了解Z-index属性，先要从他的三个概念开始了解，1.层叠上下文，2.层叠等级，3.层叠顺序
什么是层叠上下文？
层叠上下文，英文称作”stackingcontext”.是HTML中的一个三维的概念。如果一个元素含有层叠上下文，我们可以理解为这个元素在z轴上就“高人一等”。层叠上下文是一个概念，跟「块状格式化上下文(BFC)」
其实通俗来讲，就是你看电脑的这个方向的一个显示顺序，比如说，桌子上有一大堆纸，每一张纸，实际上你就可以理解为一个层叠上下文中的一个层叠顺序，你能看到的，往往都是最靠上的那张纸，也就是离你眼睛最近的那一张。然而对于咱们的z-index来说呢，值越大，也就相当于离你眼睛越近。在纸张里的位置越靠上。
但是有时候设置z-index的值时，为什么又达不到你想要的结果呢。
什么是层叠水平？
“层叠水平”英文称作”stackinglevel”，决定了同一个层叠上下文中元素在z轴上的显示顺序。普通元素的层叠水平优先由层叠上下文决定，因此，层叠水平的比较只有在同一层叠上下文元素中才有意义。需要注意的是，诸位千万不要把层叠水平和CSS的z-index属性混为一谈。没错，某些情况下z-index确实可以影响层叠水平，但是，只限于定位元素以及flex盒子的孩子元素；而层叠水平所有的元素都存在
这么理解吧~上面提过元素具有层叠上下文好比当官，大家都知道的，这当官的家里都有丫鬟啊保镖啊管家啊什么的。所谓打狗看主人，A官员家里的管家和B官员家里的管家做PK实际上是没有意义的，因为他们牛不牛逼完全由他们的主子决定的。所以说z-index 这个属性是个拼爹的属性（如果父元素的层级低，那么子元素再怎么努力都没用），后面的层叠顺序中会讲到
什么是层叠顺序？
“层叠顺序”英文称作”stackingorder”. 表示元素发生层叠时候有着特定的垂直显示顺序，注意，这里跟上面两个不一样，上面的层叠上下文和层叠水平是概念，而这里的层叠顺序是规则。
1.形成层叠上下文环境的元素的背景与边框
2.拥有负z-index 的子堆叠上下文元素 （负的越高越堆叠层级越低）
3.正常流式布局，非inline-block，无 position 定位（static除外）的子元素
4.无position 定位（static除外）的 float 浮动元素
5.正常流式布局,非定位的内联元素，因为表现的是内容，所有层叠顺序优先
6.拥有z-index:0 的子堆叠上下文元素
7.拥有正z-index: 的子堆叠上下文元素（正的越低越堆叠层级越低）
为什么定位元素会层叠在普通元素的上面？其根本原因就在于，元素一旦成为定位元素，其z-index就会自动生效，此时其z-index就是默认的auto，也就是0级别，根据上面的层叠顺序表，就会覆盖inline或block或float元素。
务必牢记的层叠准则
•谁大谁上：当具有明显层叠水平标示的时候，如z-index值，在同一层叠上下文领域，层叠水平值大的覆盖小的那个；（层叠水平小的先被绘制）
•后来居上：当元素水平一致、层叠顺序相同时，在DOM流中处于后面的元素覆盖前面的元素。
如何创建层叠上下文？
页面根元素html天生具有层叠上下文，为“根层叠上下文”
z-index值不为auto而是数值的定位元素(position:relative| absolute)
其他CSS3属性
讲完这么多，大家都还是云里雾里的吧？那我们来看看几个例子
z-index:auto和z-index:0的定位元素虽然看上去效果一样，但是有本质区别。
对于z-index为auto的一般定位元素，其只是普通元素，不会创建层叠上下文，所以层叠时要么看子元素层叠水平，谁大谁上，要么按"后来居上"原则；第一张图的横妹子z-index为2，所有在上面
对于z-index为0的一般定位元素，自身会创建层叠上下文，从而会影响子元素的层叠显示问题，两个<img>妹子的层叠顺序比较变成了优先比较其父级层叠上下文元素的层叠顺序。这里，由于两者都是z-index:0，层叠顺序这一块两者一样大，此时，遵循层叠黄金准则的另外一个准则“后来居上”，根据在DOM流中的位置决定谁在上面，于是，位于后面的竖着的妹子就自然而然趴在了横着的妹子身上。
结果：
不设置Z-index的层叠
float层叠
层叠上下文的实例-同一层叠上下文
可看出只有div2创建了层叠上下文，（根元素本身就带层叠上下文）虽然div2、div3、div4不在同一个BFC中，但是都处于html的根层叠上下文中，且div2的z-index最高，所以它处于最上方。
稍作修改，注意：当单独给div4设置更高的z-index时，div4会被提到最上层；但是当设置div3位最高z-index时，div3作为父元素会带着div4这个子元素一起跑到最上面。
层叠上下文的实例-不同层叠上下文
即使div4的z-index：100是最大的，但是div4和div2不在同一层叠上下文中，而div2和div3在同一层叠上下文中（html根元素层叠）,并且div2的层叠水平更高，所以div2会在div3之上，而div4只是div3的子元素，本身它的层叠上下文的等级就比div2低一级。
将代码做修改，给div1也创建层叠上下文
现在div1，div3都各自创建了层叠上下文，所以div2和div4不再有直接层叠关系，而要看他们的父元素。（div2被遮盖是因为根据“后来居上”原理，div3层叠水平高于div1）
同一层叠上下文中，看各自的层叠水平；不同层叠上下文中，看他们的父元素层叠水平
参考资料：
张鑫旭：深入理解CSS中的层叠上下文和层叠顺序
https://www.zhangxinxu.com/wordpress/2016/01/understand-css-stacking-context-order-z-index/
