without z-index for parent div output looks like this.
CodePudding user response：
If you add z-index to parent you create new stacking context
Just remove z-index from parent element
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>
<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" class="snippet-box-edit snippet-box-result" frameborder="0"></iframe>
UPD: from comment
I want to add effects for active card i.e. brown background for active card.
.card.active{
background-color:#923929;
}
