为什么 VUEJS 风格的 z-index 不起作用？

Question

我正在创建一个简单的组件，它列出了四个步骤，指示您所在的步骤并让您完成这些步骤。我想使这些数字在一个圆圈内并且这些圆圈从一行的开头到结尾分布。我为他们做了以下 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 和这个 link 中重现错误时，您会发现它正确无误地完成了。

这是我的 link

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

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

提前感谢您的帮助和抽出时间

Answer 1

将 position: relative 添加到 .cta a

.cta a{
position: relative;
}

为什么 VUEJS 风格的 z-index 不起作用？

Why z-index in VUEJS style is not working?

html

css

z-index

vue.js