CSS中的层叠上下文和层叠水平

层叠上下文：是HTML元素的一个三维概念，表示元素在Z轴上有了“可以高人一等”

页面根元素html天生具有层叠上下文，称之为“跟层叠上下文”；

z-index值为数值的定位元素也具有层叠上下文；

层叠水平：层叠上下文中的每个元素都有一个层叠水平，决定了同一个层叠上下文中元素在z轴上的显示顺序。遵循“后来居上”和“谁大谁上”的层叠准则；

每个元素都有层叠水平，但z-index只有在定位元素中才起作用。层叠水平和z-index不是一个东西；

层叠上下文的特性：

1.层叠上下文可以嵌套，组合成一个分层次的层叠上下文。

2.每个层叠上下文和兄弟元素独立，当进行层叠变换或渲染的时候，只需要考虑后代元素；

3.每个层叠上下文是自成体系的：当元素的内容被层叠后，整个元素被认为是在父层的层叠顺序中。

层叠顺序：元素发生层叠时候有着特定的垂直显示顺序





1.定位元素默认z-index:auto可以看成是z-index:0;

2.z-index不为auto的定位元素创建层叠上下文;

3.z-index层叠顺序的比较止步于父级层叠上下文;

z-index:auto;不会创建层叠上下文；

z-index:0;会创建层叠上下文；

IE7bug:z-index:auto;也会创建层叠上下文；

z-index受限于层叠上下文；



例子1：子元素z-index值不为auto的flex项（父元素display:flex|inline-flex)





例子2：透明度不为1的，也将创建层叠上下文





例子3：元素transform值不为none,将创建层叠上下文





例子:5：css3中滤镜：filter不为none;  chrome不行，火狐可以；





例子6：isolation值为isolate;

例子7：position值为fixed;不过只在chrome等blink/webkit内核浏览器