层(堆)叠顺序和层(堆)叠上下文

1. 层（堆）叠顺序
   
   由上图可知，在仅存在html这一个根元素层叠上下文的情况下，页面上的堆叠顺序为（序号越大，层级越高）：
   (0) z-index < 0
   (1) background
   (2) border
   (3) div(块级)
   (4) float
   (5) inline/inline-block(包括text)
   (6) position: absolute/relative
   (7)z-index > 0&&z-index !== auto

2. 层（堆）叠上下文
   可以构成层叠上下文的情况，以下仅列出最常见的4种情况：
   (1) 根元素 (HTML)
   (2) position:absolute/relative &&z-index !== auto
   (3) position: fixed
   (4) opacity < 1
   …
   产生层叠上下文之后主要产生的影响：
   (1) 对产生层叠上下文的元素本身来说，z-index < 0的层级顺序会由background之后调到border之后块级之前
   (2) 对层叠上下文中的元素来说，产生层叠上下文的（父级）z-index越高，整个层叠块的层级就越高。因此会产生页面中z-index < 0的元素在z-index > 0元素的上层，就是因为z-index < 0处在z-index较高的层叠上下文中。

以上。