CSS世界层叠顺序类型标注：
background/border < z-index负值 < block块状水平盒子 < float浮动盒子 < inline水平盒子 < z-index 0 < z-index正值
当元素发生层叠的时候，其覆盖关系遵循两条准则：
1. 谁大谁上：当具有明显的层叠水平标识的时候，如生效的z-index属性值，在同一个层叠上下文领域，层叠水平值大的那一个覆盖小的那一个
2. 后来居上：当元素的层叠水平一致，层叠顺序相同的时候，在DOM流中处于后面的元素会覆盖前面的元素
能创建层叠上下文的方法有3种：
1. 根元素
2. z-index的值为数值创建的层叠上下文
3. 其他CSS3属性
在CSS3里面，能够创建层叠上下文的场景变多了很多，比如opacity不为0、transform属性等等
z-index负值渲染的过程就是一个寻找第一个层叠上下文元素的过程，然后层叠顺序止步于这个层叠上下文元素