堆叠顺序

元素和元素属性的堆叠顺序是不同的。如下所示，数字越大代表越靠前显示。

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之间）。

CSS堆叠顺序排列

堆叠上下文

可以理解为堆叠作用域。跟 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就高，老板就更欣赏谁，谁的地位也越高。但是公司发展之后，成立了大大小小各个部门。可能有的部门比其他部门要抢眼，或者有的部门是后成立的。这时候老板只看部门不看人，哪个部门产值高，哪个部门在老板眼中地位就高，至于个人的优秀与否老板不管。个人的能力只在其部门里，让他的主管去考量，跟同部门的人去竞争。（再次说明跟住一个好领导的重要性，个人地位也跟着部门地位水涨船高。）

z-index值不同下的情况