层叠上下文是一个非常重要的概念，理解层叠上下文，不仅可以帮助我们深入理解 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 属性为一个元素创建一个新的层叠上下文。但一个元素往往会有背景色、浮动子元素、定位子元素等。那么这些东西又是遵循怎样的顺序来堆叠的呢？
同一个层叠上下文的背景色以及内部元素，谁在上谁在下，这些都是由“层叠级别”来决定的。也就是说，层叠级别是针对同一个层叠上下文而言的。层叠级别与层叠上下文是两个不同的概念，不要混淆。
在同一个层叠上下文中，层叠级别从低到高排列（级别高的显示在级别低的前面），如下图所示。
(1)背景和边框(父级)：也就是当前层叠上下文的背景和边框。
(2)负z- index:z- index为负值的“内部元素”。
(3)块盒子：普通文档流下的块盒子( block- level box)。
(4)浮动盒子：非定位的浮动元素(也就是排除了position: relative的浮动盒子)。
(5)行内盒子：普通文档流下的行内盒子( inline- level box)。
(6)z- index为0的“内部元素”。
(7)正z-index z-index为正值的“内部元素”。
那么问题来了：为什么行内元素的层叠级别要比浮动元素和块元素的高呢？
因为背景和边框一般为装饰属性，所以层叠级别最低。浮动元素和块元素一般用作布局，而行内元素都是内容。对于一个页面来说，最重要的当然是内容。因此，一定要让内容的层叠级别相当高。
3.层叠上下文的特点
(1)同一个层叠上下文中，我们比较的是“内部元素层叠级别”。层叠级别大的元素显示在上，层叠级别小的元素显示在下；
(2)同一个层叠上下文中，如果两个元素的层叠级别相同(即z- index值相同)，则后面的元素堆叠在前面元素的上面，遵循“后来者居上”原则；
3)不同的层叠上下文中，我们比较的是“父级元素层叠级别”。元素显示顺序以“父级层叠上下文”的层叠级别来决定显示的先后顺序，与自身的层叠级别无关
现在理解了浮动原理了吗：正因为浮动元素的层级比块级元素的层级要高，所以，浮动元素会“浮“到上面去，脱离文档流。
寄语：
关于层叠上下文最重要的就是一个“叠”字，就是堆叠，理解了堆叠也就理解了层叠上下文。