Css 对框阴影、z索引行为使用伪元素

我使用

：before

和

：after

伪元素在文本卡上创建自定义形状的阴影。我像这样使用css（）：

到目前为止还不错。当我向

.card

元素添加一些背景时，问题就会出现，例如

背景：#0aabff

（）。注意，

周围的伪元素阴影消失了

我试图通过将
z-index
添加到我的
.text
元素中来解决这个问题，但随后，我的
.text
元素不再位于后面，而是在前面显示我的
：before，：after
，尽管有
z-index:-1属性（）

这对我来说毫无意义，我仍然不知道如何解决这种问题。也许，有某种解决方法，或者另一种方法来获得我需要的阴影（最初的想法是由
css tricks.com
提供的）
 您可以将低于
-1
的
z-index
添加到
卡
类中

.card {
    z-index:-2;
    position:relative;
}

这是因为
伪元素的
z-index
低于
卡的默认
z-index
值。默认情况下，背景是透明的，您可以看到阴影。当您添加
背景色时
将位于
伪元素
上方

看

问题在于
中提到的css的堆叠，这对您有帮助吗
首先，请注意定位元素上的z-index和变换本身会在元素上创建新的“堆叠上下文”。
您能否详细说明，没有
位置：相对
？@TwiStar z-index只能在定位元素上工作（
位置：绝对
，
位置：相对
，或
位置：固定
）且不在默认的
静态
.card {
    z-index:-2;
    position:relative;
}