css 对元素在文档中的排列的影响

文档中元素的排列主要是根据层叠关系进行排列的；

  形成层叠上下文的方法有：

    1)、根元素

    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 的元素；