z-index 层叠上下文
取值范围：有符号 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:
- The stack level of the box in the current stacking context.
- 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 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":
- 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 值只在父级层叠上下文中（理解为层）有意义。子级层叠上下文被自动视为父级层叠上下文的一个独立单元。
