来自: https://www.w3.org/TR/CSS22/visuren.html#z-index
Within each stacking context, the following layers are painted in back-to-front order:
- the background and borders of the element forming the stacking context.
- the child stacking contexts with negative stack levels (most negative first).
- the in-flow, non-inline-level, non-positioned descendants.
- the non-positioned floats.
- the in-flow, inline-level, non-positioned descendants, including inline tables and inline blocks.
- the child stacking contexts with stack level 0 and the positioned descendants with stack level 0.
- 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.层叠顺序为正数的子层叠上下文。