第1步：基本概念。级联上下文是一个概念上的东西。学过编译原理的人应该很清楚这里的脉络，级联就是一个词。解释一下，就是一个根据级联规则来确定位置的环境。另一件需要注意的事情是，具有堆叠上下文的元素比普通元素更接近眼睛。级联层级也是概念上的东西。说白了就是：在级联上下文环境中，里面元素的顺序排列在z轴上，级联顺序就是这里说的具体规则，是一个实际的东西。第2步：级联顺序。需要记住的是，内部堆叠上下文及其子元素受制于外部堆叠上下文，下面是堆叠顺序，从远到近。级联上下文背景/边框；负z指数；块块盒模型；浮动浮动框；z-index为auto或不依赖于z-index的0上下文；z-index为auto或为0；正z指数。第三步：产生条件。根堆叠上下文（指页面根元素，也就是元素）。定位元素和传统的堆叠上下文（使用position:absolute、position:fixed或position:relative定位元素，z-index的值为数字会产生堆叠上下文）。CSS3和新时代的堆叠上下文：一个设置为display:flex的元素，当该元素包含在设置了z-index值的元素中时，会生成一个堆叠上下文；不透明度设置为1以外的元素将生成堆叠上下文；settransform不为none的元素将生成级联上下文；mix-blend-mode未设置为normal的元素将生成级联上下文；过滤器不为none的元素将生成级联上下文；设置了isolation:isolate的元素将生成级联上下文；具有-webkit-overflow-scrolling的元素将生成级联上下文（移动）；具有will-change的元素将生成级联上下文。
