title: Why z-index in VUEJS style is not working?
body: <p>I'm creating a simple component that sets out four steps, indicating in which one you are and letting you move through them.
  I want to make the effect that these numbers are within a circle and that these circles are distributed from the beginning to the end of a line.
  For them I have made the following html</p>
  <pre><code>        &lt;div class=&quot;counter&quot;&gt;
            &lt;div class=&quot;counter-line&quot;&gt;&lt;/div&gt;
            &lt;router-link to=&quot;/init&quot; v-bind:class=&quot;{'activeStep':(step &gt;= 1)}&quot;&gt;1&lt;/router-link&gt;
            &lt;router-link to=&quot;/init/service&quot; v-bind:class=&quot;{'activeStep':(step &gt;= 2)}&quot;&gt;2&lt;/router-link&gt;
            &lt;router-link to=&quot;/init/resume&quot; v-bind:class=&quot;{'activeStep':(step &gt;= 3)}&quot;&gt;3&lt;/router-link&gt;
            &lt;router-link to=&quot;/init/contact&quot; v-bind:class=&quot;{'activeStep':(step &gt;= 4)}&quot;&gt;4&lt;/router-link&gt;
          &lt;/div&gt;
  
  
  
  </code></pre>
  <p>and here my css</p>
  <pre><code>  .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;
    }
  
  </code></pre>
  <p>I understand that the way to do it is probably not the right way, but I am in doubt as to why you do not apply the z-index to the line. When I tried to reproduce the error in the following codepen and in this link you will see that it does it correctly without problem.</p>
  <p>here's my link</p>
  <p><a href="https://codepen.io/CharlieJS/pen/abNZWye" rel="nofollow noreferrer">https://codepen.io/CharlieJS/pen/abNZWye</a></p>
  <p>If anyone can make me see my mistake, I'd appreciate it,</p>
  <p>Thank you in advance for your help and your time</p>