关于z-index的疑问-灵析社区

1，当使用position和z-index之后会创建新的stacking context结构2，创建stacking context之后，内部的元素的从后向前的创建顺序如下：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).`` 3，当z-index不为auto时，创建新的stacking context，此时.box的border和background是属于1所描述的情况，所以始终是在最下面的4，当z-index不存在，此时不创建新的stacking context，此时.box的3这种情况。故当设置z-index小于0时，即前面的2，就可以使.box覆盖在伪元素之上啦 参考：z-index-when using pseudocss stacking context