堆叠顺序
| 父级元素无定位 | 父级元素有定位 |
| 1.z-index：+ | 同 |
| 2.z-index：0 | 同 |
| 3.内联元素 | 同 |
| 4.浮动 | 同 |
| 5.块级元素 | 同 |
| 6.border | z-index：- |
| 7.background | border |
| 8.z-index：- | background |
注：
1.z-index默认是auto，auto和0有区别
2.如果是兄弟元素重叠，那么后面的元素会覆盖在前面的元素上
堆叠上下文-stacking context
满足以下条件
- HTML 根元素
- z-index不为auto的绝对/相对定位
- z-index不为auto的flex
- 透明度小于1（opcity） div style="background-color:rgba(255,0,0,0.5);"不是
- position:fixed
- transform属性不为none
（以上是熟识常用的，其它的具体参考MDN）
来源：https://www.cnblogs.com/BUBU-Sourire/p/11158470.html