嗨伙计！今天我想谈谈一个 css 功能，在我看来，它并没有引起太多关注......但它应该！我说的是isolation属性！它基本上提供了对元素如何与文档其余部分交互的更多控制，并且它通常是解决z-index 问题的优雅解决方案。

让我们从一个实际的例子开始。我制作了这张简单的卡片：

它的html非常简单，看起来像这样：

<article class="card">
  <header class="card__header">
    <img class="card__avatar" src="..." alt="..." />
    <span class="card__name">Daniel Clifford</span>
    <span class="card__role">Verified Graduate</span>
  </header>

  <p class="card__summary">I received ...</p>

  <p class="card__description">I was an EMT ...</p>
</article>

还应用了一些样式，以便设置颜色、排版和布局。但是，我们可以完全忽略它们，因为它们在我们现在要做的事情中不会发挥任何作用。

现在，假设我们要在卡片的右上角添加一个引号图像，作为一个小装饰元素。像这样的东西：

我们如何才能实现这一目标？

我们可以将引号图像视为伪元素，并将position: absolute其放置在卡片上！让我们来尝试一下吧：

.card {
  /* We want the .card element to be the containing block for its children .card::before */
  position: relative;
}

.card::before {
  /* This is a pseudo-element, so we need to give it a content by definition */
  content: "";

  /* We position our image over the card, with a little offset from the right */
  position: absolute;
  right: 2em;

  /* We define a size for our image */
  width: 150px;
  aspect-ratio: 1; /* This makes sure that the image is a square */

  /* We bring in our image through a background-image */
  background-image: url(https://raw.githubusercontent.com/francescovetere/testimonial-grid-section/main/images/bg-pattern-quotation.svg);
  background-repeat: no-repeat;
  background-size: contain; /* This makes sure that the background actually fills all the available space (150px x 150px) */
}

这是我们得到的结果：

它看起来不错，除了一个小问题：我们想将此图像推到文本后面！

这就是我们z-index发挥作用的地方。一点点z-index: -1就可以了，对吧？嗯...不完全是

它……消失了？！

好吧，如果你仔细想想，这是完全有道理的：默认情况下，每个z-index: 0元素都会有一个. 因此，这就像说默认情况下页面上的每个元素都位于同一层上。

z-index: -1当我们在伪元素上声明 a 时，我们实际上是将其推到默认层下！

我们该如何解决这个问题？

理想情况下，我们希望有一个本地的、作用域的 z-index：当我说我希望我的伪元素有一个时z-index: -1，我真正的意思是：“在所有东西后面，但不要在卡片本身后面！”

这个概念实际上内置于 CSS 中，它被称为堆叠上下文！

堆栈上下文基本上由一个元素定义，该元素充当其子级声明的根z-index。特别是，孩子们永远无法逃脱他们的堆叠环境，无论他们的堆叠环境有多低z-index。

默认情况下，纯HTML 文档将具有单个堆栈上下文，并且每个元素都引用它。这就是为什么当我们分配z-index: -1给伪元素时，它被一路推回：只有一个全局堆栈上下文！

但是，当然，我们也可以在任意元素上创建新的堆叠上下文！

我们可以通过多种方式在元素上创建新的堆叠上下文。他们之中有一些是：

• transform为其分配a ；
• filter为其分配a ；
• opacity为其分配一个；
• ...

您可以在此处找到完整的属性列表。

所有这些方法都有一个大问题：它们也有副作用！

是的，他们创建了一个堆叠上下文，这就是我们想要的，但他们也做了其他一些事情，这也许是我们不一定想要的！
我的意思是，为什么我应该被迫对元素应用不透明度来创建堆叠上下文，即使我一开始根本不想应用任何不透明度？

幸运的是，有一个简单的解决方案，那就是隔离！

isolation是一个特殊属性，其唯一且独特的目的是在其所应用的元素上创建新的堆叠上下文，并且没有其他副作用。

它接受两个值，auto和isolate。当然isolate是我们想要的。

所以，就是这样！这个问题的最终解决方案非常简单：

.card {
  position: relative;
  isolation: isolate;
}

这是所有代码的结果，如果你想搞乱它！

翻译来自：https://dev.to/francescovetere/the-css-property-you-didnt-know-you-needed-3fk0

链接: https://fly63.com/article/detial/12598