层叠上下文Stacking Context和层叠顺序Stacking Order

1. Stacking context

层叠上下文就是一条假想的网页面对用户的z轴上的延伸，层叠上下文中的元素根据其Stacking Level占用层叠上下文的空间。

Stacking Context通常由以下元素生成：

1. 根元素HTML

2. z-index值不是auto的定位元素（absolute，fixed，relative）

3. opacity小于1的元素

4. transform不是none的元素

5. 父元素display：flex，那么子元素会创建Stacking Context

 

Stacking context和Stacking Level的关系：Stacking context元素包含的子元素均含有Stacking Level，如果此子元素又生成新的Stacking context，那么

子元素所包含的子孙元素也具有Stacking Level。

下面这张图表明：

2） Stacking Order

一个Stacking context元素里面的元素要怎么布局呢？这个时候Stacking Order就登场了。有七个Stacking Level如下：

1. Background and borders — of the element forming the stacking context. The lowest level in the stack.

2. Negative Z-Index — the stacking contexts of descendants elements with negative z-index.

3. Block Level Boxes — in-flow non-inline-level non-positioned descendants.

4. Floated Boxes — non-positioned floats

5. Inline Boxes — in-flow inline-level non-positioned descendants.

6. Z-index: 0 — positioned elements. These form new stacking contexts.

7. Positive Z-index — positioned elements. The highest level in the stack.

这7个规则记住就行。

 

参考资料：

https://philipwalton.com/articles/what-no-one-told-you-about-z-index/

https://tiffanybbrown.com/2015/09/css-stacking-contexts-wtf/

https://webdesign.tutsplus.com/articles/what-you-may-not-know-about-the-z-index-property--webdesign-16892