关于层叠上下文

层叠上下文：

层叠上下文是HTML元素的三维概念，这些HTML元素在一条假想的相对于面向（电脑屏幕的）视窗或者网页的用户的z轴上延伸，HTML元素依据其自身属性按照优先级顺序占用层叠上下文的空间。

也就是说，元素在页面中不是简单的从上到下排列的，而且还有复杂的从里到外，也就是存在一个z轴，看下图：

抽象图

在一个层叠上下文中，层叠关系如下图(除了形成层叠上下文的元素，其余元素均为兄弟关系)：

层叠图-作者张鑫旭

一个层叠上下文中，从最底层到最高层依次是：

background>>border>>负index元素>>块级元素>>浮动元素>>内联元素>>定位元素(z-index为auto或者0)>>正index元素

如果一个元素没有形成层叠上下文会怎么样？

①，其内部的负index的元素会跑到该元素的background后面②，其层级没有形成层叠上下文的元素高。 

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

1,根元素 (HTML),

2,z-index 值不为 "auto"的 绝对/相对定位，

3,一个 z-index 值不为 "auto"的 flex 项目 (flex item)，即：父元素 display: flex|inline-flex，

4,opacity属性值小于 1 的元素，

5, transform属性值不为 "none"的元素，

6,position: fixed

----------------------以上为常见的

7,mix-blend-mode 属性值不为 "normal"的元素，

8,filter值不为“none”的元素，

9,perspective值不为“none”的元素，

10,isolation 属性被设置为 "isolate"的元素，

11,在will-change 中指定了任意 CSS 属性，即便你没有直接指定这些属性的值

12,-webkit-overflow-scrolling 属性被设置 "touch"的元素

在层叠上下文中，其子元素同样也按照上面解释的规则进行层叠。 特别值得一提的是，其子元素的 z-index 值只在父级层叠上下文中有意义。子级层叠上下文被自动视为父级层叠上下文的一个独立单元。

就是说假如有两个元素A和B，B的层级比A高，这时无论A里面的子元素的层级有多高，都不可能超过元素B。

下面这两个是层叠领域的黄金准则。当元素发生层叠的时候，其覆盖关系遵循下面2个准则：

谁大谁上：当具有明显的层叠水平标示的时候，如识别的z-indx值，或张鑫旭那张图片描述的层级关系，在同一个层叠上下文领域，层叠水平值大的那一个覆盖小的那一个。通俗讲就是官大的压死官小的。

后来居上：当元素的层叠水平一致、层叠顺序相同的时候，在DOM流中处于后面的元素会覆盖前面的元素。