堆叠上下文：就是指在在HTML中的三维概念。作用就是在z轴上把各元素及其子元素层叠分开。
形成条件
文档中的层叠上下文由满足以下任意一个条件的元素形成：
根元素 (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"的元素
通常情况下堆叠上下文的八层空间（如图一）
在没有设置定位时，八层空间如下
- background：背景作为底层
- border：边框作用在背景之上（层叠在上）
- 块级元素在第三层
- 浮动元素在第四层
- 内联元素在第五层（inline，inline-block）
- 设置了定位的元素在第六层
- 负z-index在背景之后；正z-index在最上层
堆叠上下文的相对性及注意事项
由于HTML就是一个堆叠上下文，故在其他元素没有形成堆叠上下文时，HTML就是作为最底层。
相对于同级元素：块级元素在相同条件下，越迟出现的层级最高。（内联元素同理）
demo1
在没有设定z-index时，由于存在相同情况下，后者覆盖前者的情况；
故例子中绿色方块覆盖蓝色方块；绿色方块内的字体覆盖蓝色方框内的字体。
但是注意，蓝色方框的字体悬浮在绿色方框之上；真是因为原始状态下内联元素始终高于块级元素
相对于不同级元素：每一个堆叠上下文相对于一个部门，部门等级高于员工等级
demo2
当设置了堆叠上下文时，虽然两者z-index属性相同，但是后者出现还是会全面覆盖前者。
因为此时两个子div都是堆叠上下文，就像是两个部门，部门内的员工（孙元素）的高低取决于部门（子元素）的层级
负z-index
当z-index设为负值时，正常情况下时位于background后方，属于看不见状态；
但是当父元素也作为一个堆叠上下文时，父元素就是相对于HTML的第二底层，就算z-index为负无穷也必须要在父元素之上。
此时负z-index元素位于图一中的，border之上，块级元素之下
