isolation在CSS中的应用

在 CSS 中，你可以使用该isolation属性来创建新的堆叠上下文。看起来是这样的：

.container-for-new-stacking-context {
  isolation: isolate;
}

isolationis的默认值auto，它有点微妙，因为可以创建堆叠上下文 - 但它取决于元素的属性以及它们是否需要它。

你还可以将值设置为inherit、   initial、revert或unset。

使用isolation: isolate;是创建新堆叠上下文的明确方式。

什么是堆叠上下文？

在 CSS 中，堆叠上下文实际上允许 HTML 元素根据提供上下文的基本元素与其起始位置进行堆叠。

元素沿具有 x 轴和 y 轴的假想矩阵放置。还有一个 z 轴，其中元素可以放置在彼此的前面或后面。该z-index属性通常用于沿 z 轴放置元素。

请记住，当渲染根 HTML 元素时，它会附带一个根/全局堆栈上下文。

有很多方法可以在全局堆叠上下文中创建堆叠上下文。一种常见的方法是使用position: relativewith z-index。

使用position: stickyorfixed有效，但会将元素置于流布局之外，并且需要额外的属性来放置所需的位置。

你也可以使用transform、clip-path或filter来方便堆叠。要查看可以形成堆叠上下文的所有方式，请阅读MDN Web Docs上的更多信息。

堆叠上下文可以包含后续的内部堆叠上下文，并继续进一步嵌套。这可能有点太像Inception那样概念化，所以让我们来看看为什么这很有用。

Z指数黑洞

使用z-index可能很难维护。你必须非常谨慎地使用它以及为它提供什么价值。

设计系统可以帮助解决与此相关的问题。创建一组可重用的值并记录在什么情况下应该使用它们会很有帮助。例如，将你的最高变量值留给将始终占据整个页面的模式和其他项目。

但大多数时候，我们真的只是想让我们的风格以我们想要的方式出现。这可能意味着规定任意z-index值并继续提高这些值直到它们起作用。

我曾z-index: 999999;多次遇到臭名昭著的人。追踪这些随机值并创建新订单可能会变得很困难。这可能会导致难以调试的问题。

你开始使用的数字越高，你进入黑洞的深度就越深，以后就越难从黑洞中爬出来。

用隔离来保持简单

将隔离属性设置为隔离是一种简单的单行代码，它可以创建新的堆叠上下文，而无需z-index将元素放在彼此的前面。

你可以在静态定位元素上使用隔离，它不会影响子元素。这是创建包含子元素的隔离基础的好方法。隔离属性也得到广泛支持。

提醒一下，这里的语法是：

.container-for-new-stacking-context {
  isolation: isolate;
}

总结：

isolation: isolate;当应用于顶级元素时，设置  将为子元素创建新的堆叠上下文。