前端-CSS: 使用isolation: isolate来创建堆叠上下文

zhezhongyun 2025-09-01 19:21 27 浏览

什么是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)之上，如下：

相关推荐