什么是级联上下文？级联上下文是网页在Z轴方向的一个概念。根据这个特点，我们可以通过在页面上堆叠元素来实现一些效果。比如页面上常见的引导浮层和Modal对话框就使用了这个特性，如下图的下拉菜单：一会儿我们想到了position:relative,position:absolute,z的属性-index，是的，通过这些你可以形成一个级联上下文，当然不仅仅是这些。stackingcontext的形成那么stackingcontext是怎么产生的呢？根据MDN中的解释，只要满足以下特征，就形成了级联上下文：html根元素本身会创建级联上下文，position值为absolute或relative且z-index值不是的元素auto，position值为固定或sticky的元素（注意：旧浏览器不支持sticky）flex容器的子元素，z-index值不是autogrid容器的子元素，z-index值不是autoopacity属性值不为1的元素mix-blend-mode属性值不为normal的元素transform属性值不为none的元素filter属性值不为none的元素perspective属性值不为none的元素clip-path属性值不为none的元素mask/mask-image/mask-border属性值不为none的元素isolation属性值为isolate的元素-webkit-overflow-scrollingattributevalueoftouch其will-change值设置任意属性且该属性为非初始（non-initial）的元素将创建一个堆叠上下文。layout、paint的contain属性值，或者包含其中之一的复合值（比如contain:strict、contain:content）看似很多，其实是一样的。同一个堆叠上下文中的元素会按照一定的规则堆叠，比如设置为absolute的元素会按照z-index的大小从上到下堆叠。当然，比较z-index大小只在相同的堆叠上下文中才有意义。堆叠顺序在同一个堆叠上下文中，定位元素会按照z-index的大小从上到下堆叠。如果z-index相同，那么后一个元素的level会比前一个高，“后者先来”。那么常规流程中的元素是如何处理的呢？可以参考下图：图片来源：https://segmentfault.com/a/11...另外，对于不在同一个stackingcontext中的元素，如果要处理stackingorder，必须注意父元素本身的堆叠顺序。相关参考堆叠上下文-CSS：层叠样式表|MDN深入理解CSS中的级联上下文和级联顺序
