层叠上下文是 HTML 中的一个三维的概念，每个层叠上下文中都有一套元素的层叠排列顺序。页面根元素天生具有层叠上下文，所以整个页面处于一个“层叠结界”中。
层叠上下文的创建：
- 页面根元素：
html - z-index 值为数值的定位元素
- 其他 css 属性
- opacity 不是 1
- transform 不是 none
- flex，z-index 不是 auto
层叠上下文中的排列规则，从下到上：
- background/border
- 负 z-index
- block 块状水平盒子
- float 浮动盒子
- inline 水平盒子
- z-index:auto, 或看成 z-index:0
- 正 z-index
由此引申出：定位元素的z-index：0和z-index：auto的区别是，前者会创建层叠上下文，影响布局。