堆叠顺序
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之间（也就是他们是同一个部门的，不让跑出去。）
其他
- text-indent
