共计 772 个字符，预计需要花费 2 分钟才能阅读完成。
第一步：基本概念。
层叠上下文是一个概念上的货色，学过编译原理的人应该对这里的上下文很分明，而层叠不过就是一个词罢了，解释一下就是，依据层叠规定决定地位的一个环境。还须要留神的一点是，具备层叠上下文的元素比一般元素要更凑近眼睛。
层叠程度也是一个概念上的货色，用大白话说就是：在一个层叠上下文的环境下，外面的元素在 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 的元素会产生层叠上下文。
正文完