深入淺析css中的層疊上下文

這篇文章帶大家聊聊css中的層疊上下文，透過範例來比較一下層疊等級，希望對大家有幫助！

前段時間，公司開始推動低程式碼平台業務，我有幸的參與其中。在這段期間牽扯到了css的層疊上下文，並給我帶來了一定的困擾，為了更好的實現業務邏輯，我覺得好好的深入研究一下css的層疊上下文。想必大家都知道網頁是二維空間的，但是內容卻是三維的，除了比較直覺的x、y之外，還存在著一個不是很直覺的z軸。

層疊上下文元素

我們日常開發過程中，比較常使用的涉及層疊上下文的屬性主要有幾種：

• position: absolute | fixed | relative | sticky

• z-index

• #float: left | right

• transform

層疊等級比較

在不牽扯到祖孫嵌套的前提下，簡單的層級對比：

z- index: -1 0

在牽扯到祖先元素已經產生了層疊上下文的時候，那是後代元素的層疊等級會受到祖先元素的影響。

Note:  層疊上下文的層級是 HTML 元素層級的子級，因為只有某些元素才會建立層疊上下文。可以這樣說，沒有創建自己的層疊上下文的元素會被父層疊上下文同化。

實戰問題

在視覺化實現的過程中，碰到了一個問題：在嵌套層級的拖曳的過程，由於嵌套的父元素上已經存在了層級問題，導致祖孫元素受到祖先元素的影響，拖曳的時候會出現被「正常文檔流」的元素所覆蓋的情況。經過一段時間的研究，產生這個問題的原因就是受不同層疊上下文的影響所導致的。

實戰

1. 同層級的層疊上下文比較

由於程式碼量太多，這裡就不浪費篇幅進行展示了，直接上我運行的結果。透過下面的圖片，我們可以對上文提到的同層級的層級比較做出印證。

2. 不同position的層疊上下文比較

對position來說，在不使用z -index的情況下，兄元素的層疊上下文大於弟元素的層疊上下文。用人話說，就是後面的元素的層疊上下文高於前面的元素。

    .fixed {
      position: fixed;
      top: 0;
      left: 0;
      background: red;
    }

    .relative {
      position: relative;
      top: 20px;
      left: 20px;
      background: green;
    }

    .absolute {
      position: absolute;
      top: 60px;
      left: 60px;
      background: yellow;
    }

    .sticky {
      position: sticky;
      top: 60px;
      left: 90px;
      background: pink;
    }

3. 不同層疊上下文中的層疊等級比較

首先我們先復現一下上面提到實戰問題，不同層疊上下文裡面的層疊等級實現。

紅色塊和綠色塊是兩個同級元素，其中紅色的層疊等級高於綠色的層疊等級，導致紅色塊中的兩個元素即使層疊等級低於橘色的塊元素，但是實際效果是，橘色的層疊等級低於另外的塊元素。

    .purple {
      top: 20px;
      left: 20px;
      background: purple;
      z-index: 10;
    }

    .pink {
      top: 60px;
      left: 60px;
      background: pink;
      z-index: 20;
    }

    .orange {
      top: 10px;
      left: 10px;
      background: orange;
      z-index: 999;
    }

這裡，提一下我對於上面的問題的解決方法，就是動態修改祖先元素的層疊等級。不過，我個人覺得這個方式有待研究，嵌套層級較多的時候，比較笨重。如果有小夥伴有更好的方式的話，歡迎在下面留言。

（學習影片分享：css影片教學）

以上是深入淺析css中的層疊上下文的詳細內容。更多資訊請關注PHP中文網其他相關文章！