什麼是CSS Isolation？

在CSS中，你可以使用 isolation 屬性來創建一個新的堆疊上下文。 下面就是它的語法：

isolation 屬性的默認值是auto, 意思是，是否可以創建堆疊上下文取決于元素的屬性以及它們是否需要它。

你還可以設置他們為這些值： inherit, initial, revert, or unset.

使用 isolation: isolate; 是明确的要創建一個新的堆疊上下文。

什麼是堆疊上下文

在 CSS 中，堆疊上下文完全允許 ​HTML 元素根據提供上下文的基本元素與其起始位置進行堆疊。元素沿具有 x 軸和 y 軸的假想矩陣放置。還有一個 z 軸，其中元素可以放置在彼此的前面或後面。 Z-Index 屬性通常用于沿 z 軸放置元素。

請記住，當渲染根 HTML 元素時，它會附帶一個根/全局堆疊上下文。

有很多方法可以在全局堆疊上下文中創建堆疊上下文。一種常見的方法是使用 position: relative 和 z-index。

使用 position: sticky 或 fixed 有效，但會将元素置于流布局之外，并且需要額外的屬性來放置所需的位置。堆疊上下文可以包含後續的内部堆疊上下文，并繼續進一步嵌套。讓我們來看看它為什麼有用。

Z-Index 黑洞

使用 z-index 可能很難維護，您必須非常謹慎地使用它。仔細設計一下或許可以幫助解決與此相關的問題。 例如，将您的最高變量值留給将始終占據整個頁面的模式。

但大多數時候，我們真的隻是想讓我們的風格以我們想要的方式出現。 這可能意味着規定任意 z-index 值并繼續提高這些值直到它們起作用。

我遇到了臭名昭著的 z-index: 999999; 很多次。 追蹤這些随機值并創建新的z-index将會變得很困難。 這可能會導緻最後難以調試。你使用的數字越高，你進入黑洞的深度就越深，以後就越難從黑洞中爬出來。

引入Isolation會讓事情變得簡單

将隔離屬性設置為隔離是一種簡單的方式，它可以創建新的堆疊上下文，而無需使用 z-index 将元素放在彼此的前面。您可以對靜态定位元素使用隔離，它不會影響子元素。 這是創建包含子元素的隔離基礎的好方法。

看下面的例子

你想将紅色的div放在藍色的下面，所以設置了z-index為-1，但你會發現，它居然跑到root div下面了，這時你可以調整z-index的值來達到目的。

更好的方法，就是給root div創建一個單獨的堆疊上下文，紅色div就不會跑到堆疊上下文之下而置于其(root)之上，如下：

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!