z-index 不适用于伪元素

Question

我想在 div 的伪元素之后添加。我这样做是为了做出反应。当我在 codepen 中测试它时，它在 codepen 中工作。但是在我的本地机器上，它不起作用。我只在 codepen 中应用了 z-index 伪元素，但它有效。在我的项目中，即使我为父元素 div 和伪元素应用了 z-index，它也无济于事。我犯了什么错误？任何人，请指导我。提前致谢。我的代码是： HTML:

        <div className='cards'>
          <div className='card active'>Card</div>
          <div className='card'>Card</div>
          <div className='card'>Card</div>
        </div>

CSS:

.card {
  width: 300px;
  height: 200px;
  background-color: #fff;
  border-radius: 5px;
  &.active {
    position: relative;
    box-shadow: 10px 10px 60px rgba(0, 0, 0, 0.1);
    z-index: 10;
    &::after {
      position: absolute;
      content: "";
      top: 0;
      left: 0;
      width: calc(100% + 5px);
      height: calc(100% + 15px);
      border-radius: 5px;
      background-color: #923929;
      z-index: -1000;
      transform: rotateZ(-2deg);
      transform-origin: top left;
    }
  }
}
.cards {
  padding: 5rem;
  display: flex;
  gap: 20rem;
  background-color: #92392920;
}

输出是

没有 z-index for parent div 输出看起来像这样。

Answer 1

如果将 z-index 添加到父级，则会创建新的 stacking context

只需从父元素中删除 z-index

UPD

Yes. also I need to add the background for section element

.what_we_do{
  background-color: #fff6f6;
  padding:5rem;
}
.card {
  width: 300px;
  height: 200px;
  background-color: #fff;
  border-radius: 5px
}

.card.active {
  position: relative;
  box-shadow: 10px 10px 60px rgba(0, 0, 0, 0.1);
}

.card.active::after {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  width: calc(100% + 5px);
  height: calc(100% + 15px);
  border-radius: 5px;
  background-color: #923929;
  z-index: -1;
  transform: rotateZ(-2deg);
  transform-origin: top left;
}

.cards {
  padding: 5rem;
  display: flex;
  gap: 20rem;
  background-color: #92392920;;
  position: relative;
  z-index: 1;
}

<section class="what_we_do">
<div class="cards">

  <div class="card active">Card</div>
  <div class="card">Card</div>
  <div class="card">Card</div>
</div>
</section>

更新：来自评论

I want to add effects for active card i.e. brown background for active card.

.card.active{
  background-color:#923929;
}

z-index 不适用于伪元素

z-index is not working with pseudo elements

html

css

z-index