渲染图层(Render Layer)与复合图层(Graphics Layer)关系

两者都是为了让HTML元素在2D平面堆叠出3D的视觉效果。

• 简单的理解就是，拥有层叠上下文属性的元素会生成一个新的层叠上下文对象，每个层叠上下文对象都是一个渲染图层，渲染图层与复合图层是不同的概念，渲染图层更像是一个纯二维的概念，无论其怎么层叠覆盖最终都归依于根层叠上下文。而复合图层则完全脱离根层叠上下文，相当于开辟新的位面。

层叠上下文

• 层叠上下文(stacking context)，是HTML中一个三维的概念。在CSS2.1规范中，每个盒模型的位置是三维的，分别是平面画布上的X轴，Y轴以及表示层叠的Z轴。一般情况下，元素在页面上沿X轴Y轴平铺，我们察觉不到它们在Z轴上的层叠关系。而一旦元素发生堆叠，这时就能发现某个元素可能覆盖了另一个元素或者被另一个元素覆盖。
• 如果一个元素含有层叠上下文，(也就是说它是层叠上下文元素)，我们可以理解为这个元素在Z轴上就“高人一等”，最终表现就是它离屏幕观察者更近。

如何形成层叠上下文

• 文档根元素 ，称为“根层叠上下文”。
• position属性的值不为static且z-index值不为auto或0
• opacity属性值小于1的元素
• flex布局的元素
• will-change值设定任意属性且值为非初始化值
• transform值不为none
• filter值不为none

层叠顺序

• 层叠等级的比较只有在当前层叠上下文元素中才有意义。不同层叠上下文中比较层叠等级是没有意义的。
• 在同一个层叠上下文中且不考虑CSS3的情况下，当元素发生层叠时，层叠顺序遵循下图中的规