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