堆叠上下文（自己总结）

即使不出现堆叠上下文的顺序图

顺序图

1. background
2. border
3. 块级
4. 浮动
5. 内联
6. z-index: 0
7. z-index: +

如果是兄弟元素重叠，那么后面的盖在前面的身上。

堆叠上下文出现情况（满足以下条件就是新的部门，新的堆叠上下文）

• 根元素 (HTML),
• z-index 值不为 "auto"的 绝对/相对定位，
• 一个 z-index 值不为 "auto"的 flex 项目 (flex item)，即：父元素 display: flex|inline-flex，
• opacity 属性值小于 1 的元素（参考 the specification for opacity），

---

例子：

image.png

尽管b1的z-index比a1的要小但是，他的上一部门层级b比a的z-index要大，所以b里面所有的成员都比a要大。
http://js.jirengu.com/tukat/1/edit?html,css,output

负z-index
负z-index位置主要看他有没有出现新部门

负z-index
image.png