如何在带有z-index的CSS伪类之前和之后使用

问题描述

我正在尝试实现此结果

此刻，我在React组件中使用<div class="YourProfileImg"/>来制作具有阴影的形状并将其z-index设置在灰色框后面，然后使用:: before伪元素来制作阴影白色圆圈，其z索引高于灰色容器a，最后是包含img的:: after伪元素。

但是当我编写代码时，这些伪元素看起来并不能具有不同的z-index来按照我想要的方式对其进行分层。

这是我的JSX代码：

<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>

这是灰色框。

这是我的CSS代码：

.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.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;
}

这就是我现在要实现的结果：

我该如何解决？

解决方法

@Lorenzo Case Del Rosario我想您应该添加HTML来理解问题。

下面的代码会将圆圈保留在灰色框的顶部

.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.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>