描述 `z-index` 和堆叠上下文是如何形成的。

CSS 中的z-index属性可以控制重叠元素的垂直堆叠顺序。 z-index只影响定位元素(position值不是static的元素) 及其后代或 flex item。

在没有任何z-index值的情况下，元素按照它们在 DOM 中出现的顺序堆叠（同一层次中最低的一个出现在上面）。 具有非static定位(及其子位置) 的元素总是会出现在默认static位置的元素之上，不论 HTML 层次结构如何。

堆叠上下文是一个包含一组图层的元素。 在一个局部堆叠环境中，其子元素的z-index值是相对于该元素而不是根 document 设置的。 该上下文之外的层--即局部堆叠上下文的同级元素--不能位于它的层之间。 如果一个元素 B 位于元素 A 的上面，元素 A 的一个子元素 C 永远不会高于元素 B，即使元素 C 的z-index比元素 B 高。

每个堆叠上下文都是自成一体的--在元素的内容被堆叠后，整个元素被认为是按照父堆叠上下文的堆叠顺序。 少数 CSS 属性会触发一个新的堆叠上下文，如小于 1 的 opacity 、filter 不是 none 和 transform 不是 none 。

注意：究竟是什么让一个元素有资格创建一个堆叠上下文，在这一长串规则中列出。