CSS 中的層疊上下文

什麼是層疊上下文

層疊上下文便是網頁在 Z 軸方向的一個概念，根據這個特性咱們能夠在頁面上經過元素堆疊實現一些效果。好比頁面上常見的引導浮層、Modal 對話框用的就是這個特性，以下圖中的下拉菜單：

一瞬間咱們就想到了 position: relative, position: absolute, z-index 這些屬性，沒錯，經過這些就能夠造成層疊上下文，固然了也不單單是這些。

層疊上下文的造成

那麼層疊上下文是如何產生的呢？根據 MDN 裏的解釋，只要符合如下特徵就造成了層疊上下文：

• html 根元素自身就會建立一個層疊上下文
• position 值爲 absolute 或 relative 且 z-index 值不爲 auto 的元素
• position 值爲 fixed 或 sticky 的元素（注意：sticky 在老舊瀏覽器上不支持）
• flex 容器的子元素，且 z-index 值不爲 auto
• grid 容器的子元素，且 z-index 值不爲 auto
• opacity 屬性值不爲 1 的元素
• mix-blend-mode 屬性不爲 normal 的元素
• transform 屬性值不爲 none 的元素
• filter 屬性值不爲 none 的元素
• perspective 屬性值不爲 none 的元素
• clip-path 屬性值不爲 none 的元素
• mask / mask-image / mask-border 屬性值不爲 none 的元素
• isolation 屬性值爲 isolate 的元素
• -webkit-overflow-scrolling 屬性值爲 touch 的元素
• will-change 值設定了任一屬性而該屬性在非初始值（non-initial）時會建立層疊上下文
• contain 屬性值爲 layout、paint 或包含它們其中之一的合成值（好比 contain: strict、contain: content）的元素

看起來不少，其實道理都是同樣的，在同一層疊上下文中元素會按照必定的規則進行層疊，好比設置 absolute 的元素會按照 z-index 的大小從上到下依次層疊。固然要比較 z-index 的大小隻有在同一個層疊上下文中才有意義。

層疊順序

在同一個層疊上下文中，定位元素會按照 z-index 的大小從上到下進行層疊，若是 z-index 同樣，那麼後面的元素等級要大於前面的，「後來者居上」。

那麼常規流中元素是怎麼處理的呢？能夠參考下圖：

圖片來源： https://segmentfault.com/a/11...

另外，不在同一個層疊上下文中的元素，若是要進行層疊順序處理，必定要注意父元素自己的層疊順序。

相關參考

• The stacking context - CSS: Cascading Style Sheets | MDN
• 深刻理解CSS中的層疊上下文和層疊順序