CSS之层叠上下文

层叠上下文是一个非常重要的概念，理解层叠上下文，不仅可以帮助我们深入理解 z-index 对元素堆叠顺序的控制，而且对于我们深入理解浮动和定位也是非常重要的。

1. 什么是层叠上下文？

       层叠上下文，是 HTML 中的一个三维概念。从 " z-index "这个属性可以知道，虽然网页是平面的，但实际上网页是三维结构，除了水平 X 轴，竖直 Y 轴，还有 Z 轴（方向指向用户）。Z 轴往往是用来设定层的先后顺序的。
      层叠上下文跟块即格式化上下文（BFC）（详见另一篇文章：CSS 之 BFC（块级格式化上下文））相似，是可以创建出来的。你可以在 CSS 中添加一定的属性来将某个元素创建一个层叠上下文出来。
      如果一个元素具备以下任何一个条件，则该元素会创建一个新的层叠上下文。
      （1）根元素；
      （2）z-index 不为 auto 的定位元素。（z-index 的默认值为 auto）
根元素会创建一个层叠上下文，我们称之为“根层叠上下文”。这个与根元素创建一个 BFC 是一样的。所以创建一个新的层叠上下文也就只有一个途径了—— z-index 属性。

2.什么是层叠级别？

      从上面我们知道，可以使用 z-index 属性为一个元素创建一个新的层叠上下文。但一个元素往往会有背景色、浮动子元素、定位子元素等。那么这些东西又是遵循怎样的顺序来堆叠的呢？
      同一个层叠上