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