z-index is not working with pseudo elements

Question

I want to add after pseudo element for div. I did this in react. When I test it in codepen, it works in codepen. But in my local machine, it is not working. I applied z-index pseudo element only in codepen, But it works. In my project, Even I applied z-index for both parent div and pseudo element, it does not help. What mistake I did? Anyone, Please guide me. Thanks in Advance. My code is: 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;
}

output is

without z-index for parent div output looks like this.

above code is working fine on codepen. but not in my project. this image is project screen output — Sowmiya, Oct 07 '21 at 07:23
css code missed.... share your codepen example for quick result — Aman Sharma, Oct 07 '21 at 07:23
If we can't reproduce your issue we can't help you. check if it is some rules that ovrewrite your z-index — Sfili_81, Oct 07 '21 at 07:24
@Sowmiya there must be a class or id at the starting of the css. we don't know on which div you are using this css `cards` or `card` .if you want quick result create working snippet or share your codepen example — Aman Sharma, Oct 07 '21 at 07:27
@AmanSharma, sorry. I did a mistake while editing. Now there is a class name. — Sowmiya, Oct 07 '21 at 07:29
which css pre-processor you are using in your file? (file extension) .scss or .css — Aman Sharma, Oct 07 '21 at 07:35

Greg-- · Accepted Answer · 2021-10-07T12:29:24.007

0

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>

UPD: from comment

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

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

edited Oct 07 '21 at 12:29

answered Oct 07 '21 at 07:47

Greg--

636
4
16

If I did that, brown background is not shown.My pblm is this. It works on codepen . but it does not work on my project. I added output screen in my project for above code. – Sowmiya Oct 07 '21 at 07:53
what did you try to do with z-index?? your code works as expected, there are no elements in the parent context behind which the :after element would hide – Greg-- Oct 07 '21 at 07:56
I want to add effects for active card i.e. brown background for active card. But I got desired output in codepen. but when I did with my react project with antd , It does not work as expected. – Sowmiya Oct 07 '21 at 07:59
@Sowmiya, i'm not sure what did you mean "brown background for active card." in my code you get what you try, but you expect something completely different. Maybe you need to add `.card.active{ background-color: #923929;}` ?? did you have result for example – Greg-- Oct 07 '21 at 08:08
I paste your code . But It also doesn't work. ::after element resides there. but Background color is not applied. Output is here. https://imgur.com/a/9mMTbZb – Sowmiya Oct 07 '21 at 08:13
What I mean the word "Background" here, I have to position the ::after element behind the card for active card – Sowmiya Oct 07 '21 at 08:18
I found a root cause of the pblm. I have parent section above cards div. It has background color. when I remove that background color ::after element is shown. If section had background color, ::after element is not shown. How to do this? I want both section background color and ::after element effects. Output images here: https://imgur.com/a/OqvWxFr – Sowmiya Oct 07 '21 at 08:43
First screen is what you need? – Greg-- Oct 07 '21 at 08:55
In first pic, I didn't remove the section's background color so ::after element is not visible. I didn't want this . In second pic, When I remove background color for section, ::after element is shown. This is I want. But I also need background color for section – Sowmiya Oct 07 '21 at 09:20
Like this? https://imgur.com/a/Z9RCK5w – Greg-- Oct 07 '21 at 09:31
Yes. also I need to add the background for section element – Sowmiya Oct 07 '21 at 09:32
jsfiddle: https://jsfiddle.net/sowmiya_p/qr1cz38u/1. You can check here. Please test it by removing .what_we_do 's background color – Sowmiya Oct 07 '21 at 09:41
1

@Sowmiya i update answer in snippet, that what you want? – Greg-- Oct 07 '21 at 12:29
Same like first time issue was with stacking context, read about it, its simple thing that frond end developer need to understand. I create new context for .cards so child elements with z-index -1 can't path through it – Greg-- Oct 07 '21 at 17:24
Okay sir. understood . Thank you sir – Sowmiya Oct 21 '21 at 09:37

z-index is not working with pseudo elements

1 Answers1