一些术语叫法
普通元素
不拥有层叠上下文的元素。
层叠上下文元素
自身拥有层叠上下文的元素。
子级层叠上下文
层叠上下文内部是可以嵌套层叠上下文的，而直接子级层叠上下文就是儿子辈的层叠上下文；需要注意的是它并不一定是直接子元素创建的，可能是某个后代元素。
============ ============
1. 层叠上下文
正如 MDN 中所说的一样，层叠上下文就是一个三维构想，相当于就是一个三维坐标系。
其中html元素可以在Z轴上面进行堆叠，但是谁在上层或下层，就需要根据 层叠等级 来进排列了。
嵌套层叠上下文
需要注意的是，html是根层叠上下文，其中子元素会根据规则在Z轴上进行层叠。
而它的后代元素也可以根据一些CSS属性创建新的层叠上下文，它的子元素继续根据相同的规则在Z轴上进行层叠，并且后代元素也可以创建新的层叠上下文。
这里就像是俄罗斯套娃一样。
子级层叠上下文元素: 创建的层叠上下文相当于是一个独立单元，但是它的内容和自身会作为一个整体，按规定在父级层叠上下文中进行层叠的。
子级层叠上下文: 内部的元素，虽然按照和父级层叠上下文相同的规则在Z轴进行层叠，但是和外面的层叠上下文互不干扰，是作为一个独立的世界进行运行。
2. 层叠等级
层叠等级指的又是什么？层叠等级(stacking level)，叫“层叠级别”/“层叠水平”也行。
“层叠水平”英文称作”stacking level”，决定了同一个父级层叠上下文中元素在z轴上的显示顺序，而这个显示顺序则是由层叠规则来决定的。
3. 层叠规则
元素发生层叠时会按照层叠规则在Z轴上进行堆叠，它决定了同一层叠上下文中，元素在Z轴上的层叠等级，等级高的处于Z轴的上层。
前置条件: 层叠等级需要在同一层叠上下文中进行比较
层叠等级的比较只有在当前层叠上下文元素中才有意义，不同层叠上下文中比较层叠等级是没有意义的。
好比a,b两个与元素分别在不同的层叠上下文中，那么谁的等级更高，不是自己决定，而是所在的层叠上下文决定。
必须要找到它们在同一父级层叠上下中的那一层层叠上下文元素进行比较才能决定谁的层级更高。
如图-层叠顺序的规则如下：
-
层叠上下文元素的背景和边框处于独立世界的最底层
background/border"指的是层叠上下文元素的背景和边框，在自己创建的层叠上下文中，边框和背景永远处于Z轴最低层。
就是是z-index < 0; 也不能出现在其的下一层。 -
z-index < 0;
需要注意的是，z-index需要配合定位元素使用。 -
块级水平盒子
-
浮动盒子
-
行内级水平盒子
同一层叠上下文中,其中inline/inline-block元素层叠顺序更高的原因在于，css中图片和文字会优先显示。 -
z-index: auto / z-index: 0
-
z-index > 0
层叠顺序补充
-
静态元素默认 position: static; 的z-index: auto;不会参与层叠规则。
-
元素的position属性只要不是static(默认值)，z-index默认是auto，会参与到层叠规则中。
-
z-index: auto 和 z-index: 0 在Z轴上表示的层级关系是相等的，都是层级0，属于同一层级；
但这两个属性值本身是有根本区别的，比如position值为relative或absolute时，z-index:auto;时，不会创建一个新的层叠上下文。 -
同一个层叠上下文中，拥有层叠上下文的元素，层叠等级会高于普通元素，且等于z-index:auto;或者z-index:0的元素。
-
需要注意的是，就算是不同层叠上下文中的元素，只要是
行内级盒子遇见了浮动元素，都得进行环绕排列，不可能会覆盖在浮动元素之上。
解决方案，让元素脱离文档流，比如 position: absolute; -
同一层叠上下文中,层叠等级相同，那么后者覆盖前者。
