你需要知道的CSS属性isolation
嗨伙计！今天我想谈谈一个 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
本文内容仅供个人学习/研究/参考使用，不构成任何决策建议或专业指导。分享/转载时请标明原文来源，同时请勿将内容用于商业售卖、虚假宣传等非学习用途哦～感谢您的理解与支持！
