层叠水平（stacking level）与层叠上下文（stacking context）

层叠水平顺序（W3C）：

1. 形成堆叠上下文环境的元素的背景与边框.
2. 拥有负 z-index 的子堆叠上下文元素 （z-index的值越小层级越低）.
3. 正常流式布局，非 inline-block，无 position 定位（除了static）的子元素.
4. 无 position 定位（static除外）的 float 浮动元素.
5. 正常流式布局， inline-block元素，无 position 定位（除了static）的子元素
6. （包括 inline-table 和 inline-block）.
7. 拥有 z-index:0 的子堆叠上下文元素.
8. 拥有正 z-index: 的子堆叠上下文元素（z-index的值越小层级越低）.

Within each stacking context, the following layers are painted in
back-to-front order:
1、the background and borders of the element forming the stacking context.
2、the child stacking contexts with negative stack levels (most negative first).
3、the in-flow, non-inline-level, non-positioned descendants.
4、the non-positioned floats.
5、the in-flow, inline-level, non-positioned descendants, including inline tables and inline blocks.
6、the child stacking contexts with stack level 0 and the positioned descendants with stack level 0.
7、the child stacking contexts with positive stack levels (least positive first).

对于拥有相同父元素的子元素，默认情况下inline-block的子元素会堆叠在float浮动子元素上方（无论DOM顺序如何）。

层叠上下文（MDN）:
实例地址 实例源码地址

文档中的层叠上下文由满足以下任意一个条件的元素形成：

• 根元素 (HTML),
• z-index 值不为 "auto"的 绝对/相对定位，
• 一个 z-index 值不为 "auto"的 flex 项目 (flex item)，即：父元素 display:
  flex|inline-flex，
• opacity 属性值小于 1 的元素，
• transform 属性值不为 "none"的元素，
• mix-blend-mode 属性值不为 "normal"的元素，
• filter值不为“none”的元素，
• perspective值不为“none”的元素，
• isolation 属性被设置为 "isolate"的元素，
• position: fixed
• 在 will-change 中指定了任意 CSS 属性，即便你没有直接指定这些属性的值
• -webkit-overflow-scrolling 属性被设置 "touch"的元素（in Safari Mobile）

总结:

• 给一个 HTML 元素定位和 z-index 赋值创建一个层叠上下文，（opacity 值不为 1 的也是相同）。
• 层叠上下文可以包含在其他层叠上下文中，并且一起创建一个有层级的层叠上下文。
• 每个层叠上下文完全独立于它的兄弟元素：当处理层叠时只考虑子元素。
• 每个层叠上下文是自包含的：当元素的内容发生层叠后，整个该元素将会 在父层叠上下文中 按顺序进行层叠。

参考：
深入理解CSS中的层叠上下文和层叠顺序
MDN
W3C