堆叠顺序

8层堆叠顺序

在这里，负的z-index在最下层（因为父元素没有定位）
可是如果父元素定位呢？负的z-index就会出现在border之上div之下。也就是说负的z-index的位置是不确定的。
所以顺序为：
１．background
２．border
３．块级
４．内联
５．z-index: 0
６．z-index: +

堆叠上下文

堆叠上下文的概念说不清楚，我们可以在MDN上看，什么时候会触发堆叠上下文：

根元素 (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"的元素

同级的谁后出现，谁出现在上边；
z-index只能给定位元素加；

比如，如果两个人A，B都在同一个部门，那么高低比较就按照他们两个人的权利(z-index比较)，但是如果两个人在不同的部门，这个时候就要比较部门的高低(z-index)。负z-index的位置，如果没有堆叠上下文，它就在最下边，但是如果触发了堆叠上下文，他就只能在border与div之间（也就是他们是同一个部门的，不让跑出去。）