为什么我们要了解什么是堆叠上下文？
1.这可以让我们明确实际开发网页中，每个元素的显示顺序到底是什么样的。
2.可以了解为什么开发过程中会有这样或者那样的显示问题？并且解决它！
目录
堆叠顺序
元素和元素属性的堆叠顺序是不同的。如下所示，数字越大代表越靠前显示。
1. background
2. border
3. 块级
4. 浮动
5. 内联
6. z-index: 0
7. z-index: +
如果是兄弟元素重叠，那么后面的盖在前面的身上。
z-index：-1，那么要分情况。
如果div是没有定位的，那么z-index：-1 会出现在background后面。
如果div是定位了的，那么z-index：-1 会出现在DIV的后面（也就是2和3之间）。
堆叠上下文
可以理解为堆叠作用域。跟 BFC 一样，我们只知道一些属性会触发堆叠上下文，但并不知道堆叠上下文是什么。
根元素 (HTML),
z-index 值不为 "auto"的 绝对/相对定位，
一个 z-index 值不为 "auto"的 flex 项目 (flex item)，即：父元素 display: flex|inline-flex，
opacity 属性值小于 1 的元素（参考 the specification for opacity），
transform 属性值不为 "none"的元素，
mix-blend-mode 属性值不为 "normal"的元素，
filter值不为“none”的元素，
perspective值不为“none”的元素，
isolation 属性被设置为 "isolate"的元素，
position: fixed
在 will-change 中指定了任意 CSS 属性，即便你没有直接指定这些属性的值（参考 这篇文章）
-webkit-overflow-scrolling 属性被设置 "touch"的元素
怎么理解html中div的堆叠上下文？
比如两个div如图所示，两个父div不是默认定位。它们两个之间先比较他们的z-index值，大的优先显示。
就好像一个公司里的2个大部门，谁的KPI高，谁就受到总裁重视，自然地位高。
但是为什么它们的z-index值相同，也是b元素先显示呢？
再打个比方，b部门是后成立的。好比新官上任三把火，表现要比老部门更抢眼一点，所以b的地位更高一点。
那两个父div比较完了，它们分别的子元素直接z-index值有什么关系呢？答案是子元素只跟自己父元素里的其他子元素z-index值比较大小。跟其他父元素的子元素显示先后就要看它们父元素的z-index值了。
这怎么理解？可以认为b部门比a部门表现抢眼，那么总裁就认为b部门的人工作能力就是a部门的人要强！（活生生的实例啊，说明选择比努力更加重要。。）
总结：如果父元素是默认定位，那么子元素可以跨元素进行比较z-index值；如果父元素不是默认定位，那么子元素只跟自己父元素内的子元素进行比较z-index值。
就像一个公司刚成立，哪有那么多的部门划分，撸起袖子就是干！谁的能力强，谁的KPI就高，老板就更欣赏谁，谁的地位也越高。但是公司发展之后，成立了大大小小各个部门。可能有的部门比其他部门要抢眼，或者有的部门是后成立的。这时候老板只看部门不看人，哪个部门产值高，哪个部门在老板眼中地位就高，至于个人的优秀与否老板不管。个人的能力只在其部门里，让他的主管去考量，跟同部门的人去竞争。（再次说明跟住一个好领导的重要性，个人地位也跟着部门地位水涨船高。）
