css2.2 层叠顺序 z-index

来自: https://www.w3.org/TR/CSS22/visuren.html#z-index

Within each stacking context, the following layers are painted in back-to-front order:

1. the background and borders of the element forming the stacking context.
2. the child stacking contexts with negative stack levels (most negative first).
3. the in-flow, non-inline-level, non-positioned descendants.
4. the non-positioned floats.
5. the in-flow, inline-level, non-positioned descendants, including inline tables and inline blocks.
6. the child stacking contexts with stack level 0 and the positioned descendants with stack level 0.
7. the child stacking contexts with positive stack levels (least positive first).
   

在每个层叠上下文中，以下子元素按照 z 轴的正方向排列。即后面的覆盖前面的。

1.创建当前层叠上下文元素的背景和边框。

2.层叠顺序为负数的子层叠上下文。

3.正常流中的非inline,非定位元素。

4.非定位浮动元素。

5.正常流中的行内非定位元素，包括inline table 和 inline blocks。

6.层叠顺序为0的子层叠上下文、层叠顺序为0的定位元素。

7.层叠顺序为正数的子层叠上下文。