为什么VUEJS风格的z-index无法正常工作？

问题描述

我正在创建一个简单的组件，该组件列出了四个步骤，指示您在其中，然后逐步进行操作。 我想使这些数字位于一个圆圈内，并使这些圆圈从一行的开始到结尾分布。 对于他们，我做了以下html

        <div class="counter">
          <div class="counter-line"></div>
          <router-link to="/init" v-bind:class="{'activeStep':(step >= 1)}">1</router-link>
          <router-link to="/init/service" v-bind:class="{'activeStep':(step >= 2)}">2</router-link>
          <router-link to="/init/resume" v-bind:class="{'activeStep':(step >= 3)}">3</router-link>
          <router-link to="/init/contact" v-bind:class="{'activeStep':(step >= 4)}">4</router-link>
        </div>

还有我的CSS

  .counter {
    width: 100%;
    margin-top: -3%;
    text-align: center;
  }

  .counter a {
    margin: 45px;
    text-decoration: none;
    font-size: 40px;
    font-weight: bold;
    font-family: 'RalewayRegular';
    display: inline-block;
    border: 3px solid #D53865;
    background-color: #F8F2EF;
    border-radius: 50px;
    width: 80px;
    height: 80px;
    padding: 5px;
    Box-sizing: border-Box;
    color: #D53865;
    z-index: 2;
  }

  .counter a:hover,.counter a:active {
    background-color: #D53865;
    color: white;
  }

  .activeStep {
    background-color: #D53865;
    border: 1px solid white;
  }

  .counter-line {
    width: 470px;
    height: 3px;
    left: 35.5%;
    top: 47%;
    border-bottom: 3px solid #D53865;
    position: absolute;
    z-index: -1;
  }

我知道这样做的方法可能不是正确的方法，但是对于为什么不将z-index应用于该行，我感到怀疑。当我尝试在以下Codepen中重现错误时，在此链接中，您会看到它正确无误地完成了任务。

这是我的链接

https://codepen.io/CharlieJS/pen/abNZWye

如果有人能让我看到我的错误，我将不胜感激，

提前感谢您的帮助和时间

解决方法

将position: relative添加到.cta a

.cta a{
position: relative;
}