stacking context-----------层叠上下文

前言----------最近工作中有同事遇到css的z-index与transfrom相互影响的问题，在此总结整理下。出现影响的原因就是对元素层叠上下文理解问题。

一  什么是层叠上下文，层叠水平，层叠顺序

层叠上下文，英文称作”stacking context”. 是HTML中的一个三维的概念。如果一个元素含有层叠上下文，我们可以理解为这个元素在z轴上就level更高一级。换句话说就是于网页中元素级别更高，离我们用户更近了。

“层叠水平”英文称作”stacking level”，决定了同一个层叠上下文中元素在z轴上的显示顺序。

普通元素的层叠水平优先由层叠上下文决定，因此，层叠水平的比较只有在当前层叠上下文元素中才有意义。

“层叠顺序”英文称作”stacking order”. 表示元素发生层叠时候有着特定的垂直显示顺序，注意，这里跟上面两个不一样，上面的层叠上下文和层叠水平是概念，而这里的层叠顺序是规则。

二  层叠顺序----层叠规则------层叠特性

z-index负 < block < float < inline/inline-block <  z-index:auto <z-index正

当元素发生层叠的时候遵循下面2个规则：

1. 值大在上：当具有明显的层叠水平标示的时候，在同一个层叠上下文领域，层叠水平值大的那一个覆盖小的那一个。
2. 后来居上：当元素的层叠水平一致、层叠顺序相同的时候，在DOM流中处于后面的元素会覆盖前面的元素。

• 层叠上下文的层叠水平要比普通元素高
• 层叠上下文可以嵌套，内部层叠上下文及其所有子元素均受制于外部的层叠上下文。

三  形成层叠上下文的属性

z-index（在设置position属性后生效）具体由值确定

opacity （opacity的值不是1的时候，是具有层叠上下文的，层叠顺序是z-index:auto级别）

transform

filter

will-change

页面中用到很多transfrom  z-index时候，会很烦，慎用太多！