怎样判断元素的层叠顺序？
可以把z-index的值想象成版本号，根据层叠上下文的层级关系串联出每个元素的”版本号“，”版本号“的大小即表示元素的层叠关系，如下所示：
Root (0)
- DIV #1 (0.5)
- DIV #2 (0.2)
- DIV #3 (0.4)
- DIV #4 (0.4.6)
- DIV #5 (0.4.1)
- DIV #6 (0.4.3)
形成层叠上下文的条件？
文档中的层叠上下文由满足以下任意一个条件的元素形成：
- 文档根元素（
<html>）； position值为absolute（绝对定位）或relative（相对定位）且z-index值不为auto的元素；position值为fixed（固定定位）或sticky（粘滞定位）的元素（沾滞定位适配所有移动设备上的浏览器，但老的桌面浏览器不支持）；- flex (
flexbox) 容器的子元素，且z-index值不为auto； - grid (
grid) 容器的子元素，且z-index值不为auto； opacity属性值小于1的元素（参见 the specification for opacity）；mix-blend-mode属性值不为normal的元素；- 以下任意属性值不为
none的元素： isolation属性值为isolate的元素；-webkit-overflow-scrolling属性值为touch的元素；will-change值设定了任一属性而该属性在 non-initial 值时会创建层叠上下文的元素（参考这篇文章）；contain属性值为layout、paint或包含它们其中之一的合成值（比如contain: strict、contain: content）的元素。
在层叠上下文中，子元素同样也按照上面解释的规则进行层叠。 重要的是，其子级层叠上下文的 z-index 值只在父级中才有意义。子级层叠上下文被自动视为父级层叠上下文的一个独立单元。
总结:
- 层叠上下文可以包含在其他层叠上下文中，并且一起创建一个层叠上下文的层级。
- 每个层叠上下文都完全独立于它的兄弟元素：当处理层叠时只考虑子元素。
- 每个层叠上下文都是自包含的：当一个元素的内容发生层叠后，该元素将被作为整体在父级层叠上下文中按顺序进行层叠。
层叠上下文的层级是 HTML 元素层级的一个子级，因为只有某些元素才会创建层叠上下文。可以这样说，没有创建自己的层叠上下文的元素会被父层叠上下文同化。
