分层展示
z-index属性
该属性指定了：
- 当前堆叠上限爱问（stacking context）中，该盒的堆叠层级（stack level）；
- 该盒是否应该建立一个堆叠上下文；
该属性的取值为：
- <integer>：是生成盒当前堆叠上下文中的堆叠层级，该盒还会建立一个新的堆叠上下文。
- auto：生成盒在当前堆叠上下文中的堆叠层级为0.该盒不会建立堆叠上下文，除非它是根元素。
堆叠上下文
渲染树绘制到画布上的顺序是根据堆叠上下文来定的，堆叠上下文可以包含堆叠上下文。每个盒都属于一个堆叠上下文。给定堆叠上下文中每个定位盒都有一个整型堆叠层级，表示它在同一堆叠上下文中相对于其他堆叠层级的Z轴上的位置。
根元素生产根堆叠上下文，其他堆叠上下文由任何z-index计算值不为auto的定位元素（包括相对定位元素）生产。
每个堆叠上下文中，下列层按照从后向前的顺序绘制：
- 元素的background和border生成的堆叠上下文
- 堆叠层级为负数的子级堆叠上下文（最负的优先）
- 流内的，非行内级，非定位（non-positioned ）后代
- 非定位浮动（元素）
- 流内的，行内级，非定位后代，包括inline table和inline block
- 堆叠层级为0的子级堆叠上下文，以及堆叠层级为0的定位的后代
- 堆叠层级为正数的子级堆叠上下文（最小的优先）