什么是层叠上下文
层叠上下文是对HTML元素在HTML页面的三维空间排布的一个构想。在这个三位空间里，x轴水平指向右，y轴水平指向下，z轴垂直屏幕指向外，在z轴上越往外靠的元素离用户越近。简而言之：层叠上下文就是对这些 HTML 元素的一个三维构想。
产生层叠上下文的条件
某些元素的渲染顺序是由其 z-index 的值影响的。这是因为这些元素具有能够使他们形成一个层叠上下文的特殊属性。
文档中的层叠上下文由满足以下任意一个条件的元素形成：
1、HTML中的根元素<html></html>本身j就具有层叠上下文，称为“根层叠上下文”。
2、普通元素设置position属性为非static值并设置z-index属性为具体数值，产生层叠上下文。
3、css3属性
flextransformopacityfilterwill-change-webkit-overflow-scrolling
层叠上下文可以包含在其他层叠上下文中，并且一起创建一个层叠上下文的层级。
每个层叠上下文都完全独立于它的兄弟元素：当处理层叠时只考虑子元素。
每个层叠上下文都是自包含的：当一个元素的内容发生层叠后，该元素将被作为整体在父级层叠上下文中按顺序进行层叠。
层叠等级
1.在同一个层叠上下文中，它描述定义的是该层叠上下文中的层叠上下文元素在Z轴上的上下顺序。在其他普通元素中，它描述定义的是这些普通元素在Z轴上的上下顺序。
2.普通元素的层叠等级优先由其所在的层叠上下文决定。层叠等级的比较只有在当前层叠上下文元素中才有意义。不同层叠上下文中比较层叠等级是没有意义的。
3.通过设置z-index可以对层叠等级进行设置。而z-index只对Position属性且属性值不为static的元素有效果。
层叠顺序
总结
1.当元素发生层叠时，首先判断这两个元素是否处于同一层叠上下文，如果是则判断层叠等级，谁的层叠等级大，谁就在上面。
2.如果不是处于同一层叠上下文，再比较他们的所在的层叠上下文的层叠等级。谁所处的层叠上下文的层叠等级高，谁就再上面。
3.如果两个元素层叠等级相同，层叠顺序相同时，在DOM结构中后面的元素显示在上面。