How to use before and after CSS pseudo classes with z-index

Question

I'm trying to achieve this result

At the moment I'm using a <div class="YourProfileImg"/> in my React component to make the shape that will have the shadow and setting its z-index behind the gray box, then its ::before pseudo element to make the white circle with its z-index higher than the gray containers one and finally the ::after pseudo element containing the img.

But when i write the code it doesn't look like those pseudo elements can have a different z-index to layer them the way i want.

This is my JSX code:

<Container
  className="YourProfileTab"
  child={
    <div>
      <div className="YourProfileImgShadow"> </div>
      <div className="YourProfileImg"> 
      <label className="CustomBrowseImgButton">
        <i className="fa fa-plus"></i>
        <input type="file" id="BrowseImg" name="myfile"/>
      </label>
      <button onClick={() => logUserId()}>log</button>
    </div>
  </div>
  }
  ></Container>
</div>

The is the gray box.

This is my CSS code:

.YourProfileImg{
  position:absolute;
  top:-50px;
  left:50%;
  transform: translateX(-50%);
  width:100px;
  height:100px;
  border-radius: 50%;
  background-color: white;
  z-index:-1;
  box-shadow: -2px 2px 2px rgba(0, 0, 0, 0.2);
}

.YourProfileImg::before{
  position:absolute;
  left:50%;
  transform: translateX(-50%);
  width:100px;
  height:100px;
  border-radius: 50%;
  background-color: white;
  content:"";
  z-index:2;
}

.YourProfileImg::after{
  position:absolute;
  top:10px;
  left:50%;
  transform: translateX(-50%);
  width:80px;
  height:80px;
  border-radius: 50%;
  background-color: yellow;
  content:"";
  z-index:3;
}

And this is the result I'm achieving right now:

How can I solve this?

Answer 1

@Lorenzo Case Del Rosario I think you should add the HTML to understand the issue.

The Below code will keep the circle at the top of the grey box

.profileWrapper{ 
     position: relative;
    padding-top: 50px;
}
.YourProfileImg{
  position:absolute;
  top:0;
  left:50%;
  transform: translateX(-50%);
  width:100px;
  height:100px;
  border-radius: 50%;
  background-color: white;
  z-index:10;
  box-shadow: -2px 2px 2px rgba(0, 0, 0, 0.2);
}

.YourProfileImg::before{
  position:absolute;
  left:50%;
  transform: translateX(-50%);
  width:100px;
  height:100px;
  border-radius: 50%;
  background-color: white;
  content:"";
  z-index:2;
}

.YourProfileImg::after{
  position:absolute;
  top:10px;
  left:50%;
  transform: translateX(-50%);
  width:80px;
  height:80px;
  border-radius: 50%;
  background-color: yellow;
  content:"";
  z-index:3;
}

.greybox{
  position:relative;
  padding:20px;  
  background: #f1f1f1;
}

 
<div class="profileWrapper">
  <div class="YourProfileImg">  </div> 
<div class="greybox"> Greybox </div>
</div>