Блог

Я создаю простой компонент, который устанавливает четыре шага, указывая, в каком из них вы находитесь, и позволяя вам перемещаться по ним. Я хочу создать эффект, что эти числа находятся внутри круга и что эти круги распределены от начала до конца строки. Для них я создал следующий 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;
}