如果一个元素是层叠上下文元素，我们可以理解为这个元素在Z轴上就“高人一等”，最终表现就是它离屏幕观察者更近。
你可以把层叠上下文元素理解为理解为该元素当了官，而其他非层叠上下文元素则可以理解为普通群众。凡是“当了官的元素”就比普通元素等级要高，也就是说元素在Z轴上更靠上，更靠近观察者。
层叠等级 (stacking level，叫层叠级别/层叠水平也行)，决定了同一个层叠上下文中元素在z轴上的显示顺序。
联系上面说到的层叠上下文可以得出结论：
1、普通元素的层叠等级优先由其所在的层叠上下文决定。
2、层叠等级的比较只有在当前层叠上下文元素中才有意义。不同层叠上下文中比较层叠等级是没有意义的。
层叠顺序 (stacking order)表示元素发生层叠时按照特定的顺序规则在Z轴上垂直显示。由此可见，前面所说的 层叠上下文 和 层叠等级 是一种概念，而这里的 层叠顺序 是一种规则。
前面说了那么多，到底如何产生层叠上下文呢？如何让一个元素变成层叠上下文元素呢？
其实，层叠上下文也基本上是有一些特定的CSS属性创建的，一般有3种方法：
1、HTML中的根元素<html></html>本身就具有层叠上下文，称为“根层叠上下文”。
2、普通元素设置position属性为非static值并设置z-index属性为具体数值，产生层叠上下文。
3、CSS3中的新属性也可以产生层叠上下文。
有两个div，p.a、p.b被包裹在一个div里，p.c被包裹在另一个div里，只为.a、.b、.c设置position和z-index属性。
效果：
因为p.a、p.b、p.c三个的父元素div都没有设置z-index，所以不会产生层叠上下文，所以.a、.b、.c都处于由<html></html>标签产生的“根层叠上下文”中，属于同一个层叠上下文，此时谁的z-index值大，谁在上面。
有两个div，p.a、p.b被包裹在一个div里，p.c被包裹在另一个div里，同时为两个div和.a、.b、.c设置position和z-index属性。
效果：
虽然p.c元素的z-index值为999，远大于p.a和p.b的z-index值，但是由于p.a、p.b的父元素div.box1产生的层叠上下文的z-index的值为2，p.c的父元素div.box2所产生的层叠上下文的z-index值为1，所以p.c永远在p.a和p.b下面。
另外，由于p.a和p.b这两个元素都在父元素div.box1产生的层叠上下文中，所以谁的z-index值大，谁在上面。
有两个div，div.box1内有div.child1，div.box2内有div.child2，来看一看.box1/.box2的z-index属性值分别为auto和0时，.child1和child2的层级有什么不同。
1、.box1/.box2虽然设置了position: relative，但是z-index: auto的情况下，这两个div还是普通元素，并没有产生层叠上下文。所以，child1/.child2属于<html></html>元素的“根层叠上下文”中，此时，谁的z-index值大，谁在上面。
2、而把.box1/.box2的z-index属性值改为0，最终结果完全相反。这时.child2覆盖在了.child1上面。原因是什么呢？因为设置z-index: 0后，.box1/.box2产生了各自的层叠上下文，这时候要比较.child1/.child2的层叠关系完全由父元素.box1/.box2的层叠关系决定。但是.box1/.box2的z-index值都为0，都是块级元素（所以它们的层叠等级，层叠顺序是相同的），这种情况下，在DOM结构中后面的覆盖前面的，所以.child2就在上面。
CSS3中出现了很多新属性，其中一些属性对层叠上下文也产生了很大的影响。如下：
父元素的display属性值为 flex|inline-flex ，子元素z-index属性值不为auto的时候，子元素为层叠上下文元素；
元素的 opacity 属性值不是1；
元素的 transform 属性值不是none；
元素 mix-blend-mode 属性值不是normal；
元素的 filter 属性值不是none；
元素的 isolation 属性值是isolate；
will-change 指定的属性值为上面任意一个；
元素的 -webkit-overflow-scrolling 属性值设置为touch。
CSS3中，元素属性满足以上条件之一，就会产生层叠上下文。我们用第1条来做一个简单的解释说明。
栗子有三个层级：div.box >div.parent >div.child
我们来看一下，给div.box设置CSS3属性display=flex对层级有什么影响。
1、.parent设置了z-index属性值，但是没有设置position属性，z-index无效，所以没有产生层叠上下文，.parent还是普通的块级元素。此时，在层叠顺序规则中，z-index值小于0的.child会被普通的block块级元素.parent覆盖。
2、当给.box设置display: flex时，.parent就变成层叠上下文元素，根据层叠顺序规则，层叠上下文元素的background/border的层叠等级小于z-index值小于0的元素的层叠等级，所以z-index值为-1的.child在.parent上面。
上面说了那么多，可能你还是有点懵。这么多概念规则，来点最实际的，有没有一个“套路”当遇到元素层叠时，能很清晰地判断出他们谁在上谁在下呢？答案是——肯定有啊！
之前只是认为z-index只是简单的值越大就越靠近观察者，越在上层。直到今天因为面试才发现不是这么简单的。在css世界中z-index属性只有和定位元素（position不为static的元素）在一起的时候才起作用，可以是整数或者负数。理论上，数值越大层级越高，但实际上其规则要复杂的多。但随着css3的到来，flex盒子的子元素也可以设置z-index属性。
要知道网页中绝大部分并不是定位元素，并且影响层叠顺序的不止z-index一个，z-index只是css层叠规则中的一叶扁舟。
所谓的层叠规则是指的当前网页中的元素发生层叠时的表现规则。
层叠上下文（stacking context）：是HTML中一个三维的概念。在CSS2.1规范中，每个盒模型的位置是三维的，分别是平面画布上的X轴，Y轴以及表示层叠的Z轴。一般情况下，元素在页面上沿X轴Y轴平铺，我们察觉不到它们在Z轴上的层叠关系。而一旦元素发生堆叠，这时就能发现某个元素可能覆盖了另一个元素或者被另一个元素覆盖。
如果一个元素含有层叠上下文，(也就是说它是层叠上下文元素)，我们可以理解为这个元素在Z轴上就“高人一等”，最终表现就是它离屏幕观察者更近。
层叠水平（stackinge-level）：决定了同一个层叠上下文中元素在z轴上的显示顺序。所有的元素多有层叠水平，包括普通元素，包括层叠上下文环境。
层叠顺序（stacking order）：表示元素发生层叠时有着特定的垂直显示顺序，层叠规则。
默认的堆叠规则，即不含有 z-index 属性时：
对于浮动的块元素来说，层叠顺序变得有些不同。浮动块元素被放置于非定位元素与定位元素之间：
z-index属性的值只能是整数（正负均可）
在下一个例子中， 所有的层都是用z-index进行排序的。 元素div#5 的z-index无效， 因为他没有被指定position属性
在之前的[增加 z-index] 的例子中, 某些 DIV 的渲染顺序是由 z-index 的值影响的。这是因为这些 DIV 具有 使他们形成一个 层叠上下文 的特殊属性 。
在层叠上下文中，其子元素同样也按照上面解释的规则进行层叠。 特别值得一提的是，其子元素的 z-index 值只在父级层叠上下文中有意义。子级层叠上下文被自动视为父级层叠上下文的一个独立单元。
所谓的层叠性与优先级，其实说白了可以理解为，不同的规则起冲突的情况下，听谁的呢？有的时候这种冲突很容易解决，有的时候我们自己都难以决断，比如好声音三位导师都选你，该跟谁走呢。索性css给出了这些规则的优先级，不需要我们去苦恼。
元素的样式该如何去展现呢，首先看一下某个元素某个属性可能作用样式的情况：
下面我们来详细分析一下这三种情况。
我们先来看有唯一指定样式的情况，因为，这种情况最简单，就一个选择，也别挑了，说啥就是啥。我们还是来大致看看。
结论：若只有唯一指定样式，以该样式为准。
多个样式规则冲突，其实有很多种情况。还记得我们学过样式引入方式有四种，涉及三种样式，分别是内联，内部和外部（参考 CSS入门4-引入CSS ）。首先我们来看只引入其中一种类型的情况下，出现冲突该如何解决。
仅有内联的情况下，要出现冲突，只可能是在style中多次对同一个属性赋值。
看上图，审查一下元素，可以看到该元素样式中，前面的red被覆盖了，color最后的取值是blue。最右边文字的颜色确实也是蓝色。
结论：只有内联样式，后面的属性赋值优先级大于前面的属性赋值。
内部样式，已经可以选择多种选择器来指定样式。所以，这里情况比内联会复杂很多。首先来复习一下选择器的种类，可以参考 CSS入门5-选择器 。这么多的选择器类型和组合关系，可能都会产生冲突，这个时候怎么办呢，想想都复杂，我们继续拆分问题。将选择器分为四类:
可以看到div中两个类对颜色的定义冲突时，不管class定义的顺序如何，以style中类的顺序为准，后面的覆盖前面的样式。如果是同一选择器，也是后者覆盖前者，这种情况可以涵盖在同类选择器的情况下。
结论：同类型选择器（类型一样，即同为元素选择器，类选择器，id选择器或者属性选择器），按style中的先后顺序，后者优先级更高。
我们选择正反两种顺序，来看不同选择器之间的比较。首先，四种选择器在一起时，id选择器获胜。然后排除id选择器，剩余三种选择器比较时，类和属性谁在下边谁赢，也就是后者覆盖前者。最后，元素分别与类和属性比较，发现元素都输了。
结论：id >(类和属性) >元素，类和属性同级，遵循同级元素后者覆盖前者的规则。
注：查看某个元素样式的时候，调试窗口是按照优先级规则从小到大往上排的，越往上的规则优先级越高，对同个属性的样式规定将会覆盖下面低优先级的样式规定。
注：要想在调试器看到动态伪类效果，需要在styles中勾选该效果。
看上面示例，我们在style内先按id，类，属性，元素，静态伪类(只应用于超链接)，动态伪类(可应用于任何元素)，目标伪类:target(IE8-不支持，匹配锚点对应的目标元素)，UI元素伪类(IE8-不支持)，结构伪类(IE8-不支持)的顺序指定规则。结果发现其表现如下：
a：id >结构伪类 >动态伪类 >静态伪类 >属性 >类 >元素 >浏览器默认属性 >继承属性
input：id >结构伪类 >UI元素伪类 >目标伪类 >动态伪类 >类 >元素 >浏览器默认属性 >继承属性
我们合并一下这两个结论，有如下结论：
3.2.1.2.2.1-1 id >结构伪类 >UI元素伪类 >目标伪类 >动态伪类 >静态伪类 >属性 >类 >元素 >浏览器默认属性 >继承属性
（当然，需要注意的是，并不是每个元素都有这些属性的）
然后，我们将style内各规则倒序一下:
结果发现其表现如下：
a：id >类 >属性 >静态伪类 >动态伪类 >结构伪类 >元素 >浏览器默认属性 >继承属性
input：id >类 >动态伪类 >目标伪类 >UI元素伪类 >结构伪类 >元素 >浏览器默认属性 >继承属性
我们合并一下这两个结论，有如下结论：
3.2.1.2.2.1-2 id >类 >属性 >静态伪类 >动态伪类 >目标伪类 >UI元素伪类 >结构伪类 >元素 >浏览器默认属性 >继承属性
综合3.2.1.2.2.1-1和3.2.1.2.2.1-2来看，我们再次验证了类和属性同级，并且发现它们和伪类也是同级的。有如下结论：
结论：id >(类，属性，伪类) >元素，类，属性和伪类同级，遵循同级元素后者覆盖前者的规则。
伪元素，说是元素，但又不是真实的元素，是一个虚拟的元素。如何详细理解这段话呢，我们来看一下下面这个例子。
先按后代，子代，通用兄弟，相邻兄弟在style中排序，发现后面的优先级高。然后顺序反过来：
由以上几点结论可以得出， 亲戚关系发生冲突时，先看id选择器数量，谁多谁大，一样多就看类（及其同级）选择器，谁多谁大，若还是一样多，则看元素选择器，谁多谁大。如果仍然一样多，谁在后面谁优先。
可以看出， 通配选择器样式优先级仅比浏览器默认样式和继承样式优先级高一些 。
总结3.2.1.2 仅有内部样式的情况，有如下结论：
ps:对于社群关系，在比较优先级时，将其理解为在该位置拆按顺序成一个个单独的个体即可。
这种情况的表现形式与内部样式一样。
这种情况遵循后者覆盖前者的原则，后面的link优先于前面的link，而不管其加载的顺序如何。
内联 >内部 >外部
CSS的继承性、层叠性、权重
css知多少（3）——样式来源与层叠规则
深入理解CSS中的层叠上下文和层叠顺序
