css - 更改 CSS 伪元素的堆叠顺序

Question

我正在用纯 CSS 设计一个 3 阶段进度条。我目前的努力如下所示。

#progBar
{
 background-color:#bdbdbd;
 padding:1.5vw;  
 position:relative; 
 height:9vw;
}
.progcapt
{
 background-color: #526cfd;
 color: transparent;
 text-shadow: 0px 2px 3px #526cfd; 
 -webkit-background-clip:text;
 font-family:'arial black';
 font-size:3vw
}
#cOne
{
 position:absolute;
 left:calc(50% - 2.5vw);
 top:calc(50% - 2.5vw);
 border-radius:5vw;
 height:5vw;
 width:5vw;
 border:1px solid #526cfd;
 text-align:center;
 display:flex;
 align-items:center;
 justify-content:center;
 box-shadow:0px 0px 3vw #526cfd;
 background-color:white;

}
#cOne::before
{
 position:absolute;
 width:50vw;
 height:1vw;   
 background-color:rgba(82,108,253,0.5);
 content:'';
/*z-index:-1; does not give the expected result*/
}
#cOneRing
{
 position:absolute; 
 top:-calc(0.5vw + 1px);
 left:-calc(0.5vw + 1px);
 width:6vw;
 height:6vw;
 border:1px solid #526cfd;
 border-radius:6vw;
 
}

 <div id='progBar'>
    <div id='cOne'>
     <span class='progcapt'>1</span>
     <div id='cOneRing'>&nbsp;</div>
    </div>
  </div>

这里的意图是这样的

• 将有三张光盘，每一步一张
• 我正在使用中央圆盘作为我的“ anchor ”
• 每个圆盘都显示有一个环形边框，我通过绝对定位圆盘并将圆环作为其子项来创建它。
• 此 anchor 的 ::before 伪元素用于创建进度条的轨道
• 整体——三个圆圈和轨道——被放置在一个相对定位的矩形条中，作为背景

我遇到的问题 - 我认为我可以通过将其 z-index 属性设置为 -1 将轨迹栏发送到其父 disc 元素后面。然而，这只会导致它完全消失。显然，我在这里做错了什么，但我无法发现那可能是什么。希望这里有人能够发现错误。

Answer 1

据我所知你需要这个

#progBar {z-index: -2;}
#cOne::after { z-index: -1;}

    #progBar
    {
    z-index: -2;
     background-color:#bdbdbd;
     padding:1.5vw;  
     position:relative; 
     height:9vw;
    }
    .progcapt
    {
     background-color: #526cfd;
     color: transparent;
     text-shadow: 0px 2px 3px #526cfd; 
     -webkit-background-clip:text;
     font-family:'arial black';
     font-size:3vw
    }
    #cOne
    {
     position:absolute;
     left:calc(50% - 2.5vw);
     top:calc(50% - 2.5vw);
     border-radius:5vw;
     height:5vw;
     width:5vw;
     border:1px solid #526cfd;
     text-align:center;
     display:flex;
     align-items:center;
     justify-content:center;
     box-shadow:0px 0px 3vw #526cfd;
     background-color:white;

    }
    #cOne::before
    {
     position:absolute;
     width:50vw;
     height:1vw;   
     background-color:rgba(82,108,253,0.5);
     content:'';
     z-index:-1; 
    }
    #cOneRing
    {
     position:absolute; 
     top:-calc(0.5vw + 1px);
     left:-calc(0.5vw + 1px);
     width:6vw;
     height:6vw;
     border:1px solid #526cfd;
     border-radius:6vw;
     
    }

     <div id='progBar'>
        <div id='cOne'>
         <span class='progcapt'>1</span>
         <div id='cOneRing'>&nbsp;</div>
        </div>
      </div>