文档中元素的排列主要是根据层叠关系进行排列的；
形成层叠上下文的方法有：
1)、根元素<html></html>
2)、position 的属性值为： absolute | relative，且 z-index 值不为 auto ;
3)、position 值为fixed | stick ；
4)、z-index 值不为 auto 的 flex 元素，即父元素属性 display: flex | inline-flex；
5)、opacity 属性值小于 1 的元素；
6)、transfrom 属性值不为 none 的元素；
7)、mix-blend-mode 属性值不为 normal 的元素；
8)、filter、perspective、clip-path、mask、mask-image、mask-border ；
9)、perspective 值不为 isolate 的元素；
10)、will-change 中指定了任意 css 属性，即便没有直接指定这些属性对的值；
11)、-webkit-overflow-scrolling 属性设置为 touch 的元素；
z-index
z-index 只使用于定位的元素，对非定位元素无效，它可以被设置为正整数、负整数、0、auto；如果一个定位元素没有设置 z-index ，那么默认为 auto；
元素的 z-index 值只在同一个层叠上下文中有意义。如果父级层叠上下文的层叠等级低于另一个层叠上下文的，那么它 z-index 设的再高也没用；
层叠顺序
层叠顺序（层叠次序、堆叠顺序）描述的是元素在同一个层叠上下文中的顺序规则，从底部开始，共有七种层叠顺序：
1)、背景和边框；
2)、负 z-index 值；
3)、块级元素；
4)、浮动元素；
5)、行内元素；
6)、z-index ： 0 ；
7)、正 z-index 值；
除了层叠顺序规则之外，还有一个规则，那就是：后来居上；
文档流
文档流分三种： 常规流、浮动、绝对定位；
BFC
BFC（block Formatting Context）块级格式化上下文，是用于布局块级盒子的一块渲染区域，相对的还有 IFC (inline Formattion Context) 内联格式化上下文；
一个 BFC 的范围包含创建该上下文元素的所有子元素，但不包括创建的新 BFC 的子元素的内部元素；
触发 BFC 的方式有：
1)、根元素，即 HTML 标签；
2)、浮动元素，即 float 值为 left | right 的元素；
3)、overflow 值不为 visible ，即值为 auto | scroll | hidden；
4)、display 值为 inline-block、table-cell、table-caption、table、inline-table、flex、inline-flex、grid、inline-grid；
5)、定位元素：position 值为 absolute、fixed；
6)、contain 为 layout、content、paint 的元素；