你不知道自己需要的 CSS 属性

大家好！👋 今天我想聊聊一个 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) */
}

这是我们得到的结果：

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

这就是 ourz-index发挥作用的地方了。一点点z-index: -1就够了，对吧？嗯……也不尽然 😕

😱 它...消失了？！

嗯，如果你仔细想想，这完全说得通：每个元素默认都有一个z-index: 0。所以，这就像是说页面上的每个元素默认都位于同一层。

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

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

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

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

堆叠上下文基本上由一个元素定义，该元素充当其子元素声明的根z-index。具体来说，无论子元素位于多低的位置，它们都永远无法脱离堆叠上下文z-index。

默认情况下，纯HTML 文档只有一个堆叠上下文，每个元素都引用它。这就是为什么当我们z-index: -1给伪元素赋值时，它会被推到最后面：只有一个全局堆叠上下文！

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

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

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

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

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

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

🪄 幸运的是，有一个简单的解决方案，它被称为隔离！

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

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

✅ 就这样！这个问题的最终解决方案非常简单：

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

如果您想弄乱它，这就是包含所有代码的结果！☺️

就这样！欢迎留言告诉我，你是否已经知道这处超棒的房产！😉

下次再见！👋