层叠上下文(stacking context)，是HTML中一个三维的概念。在CSS2.1规范中，每个盒模型的位置是三维的，分别是平面画布上的X轴，Y轴以及表示层叠的Z轴。一般情况下，元素在页面上沿X轴Y轴平铺，我们察觉不到它们在Z轴上的层叠关系。而一旦元素发生堆叠，这时就能发现某个元素可能覆盖了另一个元素或者被另一个元素覆盖。
如果一个元素含有层叠上下文，(也就是说它是层叠上下文元素)，我们可以理解为这个元素在Z轴上就“高人一等”，最终表现就是它离屏幕观察者更近。
其实，层叠上下文也基本上是有一些特定的CSS属性创建的，一般有3种方法：
1.HTML中的根元素本身就具有层叠上下文，称为“根层叠上下文”。
2.普通元素设置position属性为非static值并设置z-index属性为具体数值，产生层叠上下文。
3.CSS3中的新属性也可以产生层叠上下文。opacity
- 背景和边框---- 形成层叠上下文的元素背景和边框。层叠上下文中的最低等级
- 负z-index值---- 层叠上下文内有负z-index值的子元素
- 块级盒---- 文档流中非行内非定位子元素
- 浮动盒---- 非定位浮动元素
- 行内盒--- 文档流中行内级别非定位子元素
- z-index:0---- 定位元素。这些元素形成了新的层叠上下文。
- 正z-index值 -- 定位元素。 层叠上下文中的最高等级
background-color为透明，就可以看到z-index为负值的元素，不然看不到。
