Html 为什么VUEJS样式的z索引不起作用？

我正在创建一个简单的组件，它列出了四个步骤，指示您在哪一个步骤中，并允许您通过它们进行移动。 我想让这些数字在一个圆内，并且这些圆从一行的开始到结束都是分布的。 我为他们制作了以下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>

我理解这样做的方式可能不是正确的方式，但我怀疑您为什么不将z索引应用于该行。当我试图在下面的代码笔中重现错误时，在这个链接中，你会看到它没有问题地正确执行

这是我的链接

如果有人能让我明白我的错误，我会很感激

---

提前感谢您的帮助和时间

将

职位：relative

添加到

.cta a

.cta a{
position: relative;
}

---

非常感谢。很好用！我不明白为什么它在codepen中工作而不是在我的代码中！

.cta a{
position: relative;
}