z-index 层叠上下文

https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Understanding_z_index/The_stacking_context

取值范围：有符号 2**32，最大值 2147483647

并不是用于渲染的合成层（Chrome Devtools Layers Panel 可以查看合成层）

同一层中，分为背景类和内容类，背景显示在后面，内容（文字，img）显示在上面，在同一层同一类中才有后绘制的显示在上面的规则

For a positioned box (that is, one with any position other than static), the z-index property specifies:

1. The stack level of the box in the current stacking context.
2. Whether the box establishes a local stacking context.

A stacking context(SC) is formed, anywhere in the document, by any element in the following scenarios:

• Root element of document (HTML).
• Element with a position value "absolute" or "relative" and z-index value other than "auto".
• Element with a position value "fixed" or "sticky" (sticky for all mobile browsers, but not older desktop).（参考 这篇文章）
• Element that is a child of a flex (flexbox) container, with z-index value other than "auto".
• Element with a opacity value less than 1 (See the specification for opacity).
• Element with a mix-blend-mode value other than "normal". // 不同层不能混合
• Element with any of the following properties with value other than "none":
• transform
• filter
• perspective
• clip-path
• mask / mask-image / mask-border
• Element with a isolation value "isolate".
• Element with a webkit-overflow-scrolling value "touch".
• Element with a will-change value specifying any property that would create a stacking context on non-initial value (see this post).
• Element with a contain value of "layout", or "paint", or a composite value that includes either of them.

在层叠上下文中，其子元素的堆叠顺序跟上面解释的规则相同。 特别值得一提的是，其子元素的 z-index 值只在父级层叠上下文中（理解为层）有意义。子级层叠上下文被自动视为父级层叠上下文的一个独立单元。

https://www.w3.org/TR/CSS2/visuren.html#propdef-z-index