更改/覆盖 CSS 中 ::after 元素的 z-index [重复]答案

【问题标题】：Change/Override z-index of ::after element in CSS [duplicate]更改/覆盖 CSS 中 ::after 元素的 z-index [重复]
【发布时间】：2020-05-18 08:30:07
【问题描述】：

我想要实现的应该是这样的：

我的 CSS 如下所示：

.element {
    position: absolute;
    right: 13vw;
    top: 7vw;
    background-color: #016BA9;
    padding: 5px;
    color: #E6EEF8;
    z-index: 1;
}

.element::after{
    content: "";
    border-top: 100px solid rgb(1, 81, 128);
    border-right: 100px solid transparent;
    bottom: -100px;
    right: 0;
    position: absolute;
    z-index: -1 !important;
}

现在我的问题是：如果我将 .element 类的 z-index 设置为 1，我无法在伪元素中使用 z-index: -1 覆盖它。
我的解决方法是将轮播的 z-index 更改为 -1，从元素中删除 z-index 并在 element::after 中放置 -2 的 z-index。但随后我的轮播变得不可交互。

谢谢！

【问题讨论】：

标签： html css z-index pseudo-element

【解决方案1】：

当然，在我写完这篇文章后不久，我发现在同一堆叠上下文中的 HTML 元素将按升序排列。所以代码中的最后一个元素将显示在 TOP 上。我只是在 HTML 代码中切换了轮播和文本区域的元素，所以轮播首先显示，文本区域在它上面。然后我在轮播中添加了一个 0 的 z-index，没有给文本区域添加了一个 z-index，给 :after-element 添加了一个 -1 的 z-index。

【讨论】：