第一步：基本概念。

层叠上下文是一个概念上的货色，学过编译原理的人应该对这里的上下文很分明，而层叠不过就是一个词罢了，解释一下就是，依据层叠规定决定地位的一个环境。还须要留神的一点是，具备层叠上下文的元素比一般元素要更凑近眼睛。

层叠程度也是一个概念上的货色，用大白话说就是：在一个层叠上下文的环境下，外面的元素在z轴上的排列程序的规定，而层叠程序就是这里说的具体规定，是实际的货色。

第二步：层叠程序。

须要记住的是，外部的层叠上下文及其子元素均受制于内部的层叠上下文，上面是层叠程序，从远到近。

  • 层叠上下文background/border；
  • 负z-index；
  • block块状盒子模型；
  • float浮动盒子；
  • z-index为auto或看成0的不依赖z-index的上下文；
  • z-index为auto或看成0；
  • 正z-index。

第三步：产生条件。

根层叠上下文（指的是页面根元素，也就是 元素）。

定位元素与传统层叠上下文（应用了position:absolute、position:fixed或position:relative的定位元素，且z-index的值是数字会产生叠上下文）。

CSS3与新时代的层叠上下文:

  • 一个被设置了display:flex的元素蕴含的元素对其设置z-index为数值时其会产生层叠上下文；
  • 设置了opacity不为1的元素会产生层叠上下文；
  • 设置了transform不为none的元素会产生层叠上下文；
  • 设置了mix-blend-mode不为normal的元素会产生层叠上下文；
  • 设置了filter不为none的元素会产生层叠上下文；
  • 设置了isolation:isolate的元素会产生层叠上下文；
  • 设置了-webkit-overflow-scrolling的元素会产生层叠上下文（挪动端）；
  • 设置了will-change的元素会产生层叠上下文。