cssuistepper

CSS Stepper - LI After overlaying LI Before

I'm using some code found at codepen with a Stepper Control. I'm not vey skilled with CSS and I'm having an issue not presented in codepen, so I assume is another CSS class defined in a very long stylesheet that is shared with other team mates. The problem I tried to fix is that the line defined in the class .progressbar li:after remains above the class .progressbar li:before, that defines the circles.

li:after initially came with a z-index: -1 and li:before didn't have the z-index property, but the lines didn't appear, they were hidden behind a div, so I had to modify it and that's what is shown in the snippet. Although this z-index: -1 works in the snippet, is not working where I want to be implemented.

This first image shows the result of the CSS Stepper, taken directly from codepen to my page with z-index:-1

Issue with z-index:-1

This other image shows the result after trying to adjust the z-index property:

Issue with z-index: 1

This is the desired output:

Desired output

Here's the snippet:

.container {
      width: 600px;
      margin: 100px auto; 
      z-index: -1;
  }
  .progressbar li {
      list-style-type: none;
      width: 25%;
      float: left;
      font-size: 12px;
      position: relative;
      text-align: center;
      text-transform: uppercase;
      color: #666666;
  }
  .progressbar li:after {
      width: 100%;
      height: 2px;
      content: '';
      position: absolute;
      background-color: #666666;
      top: 15px;
      left: -50%;
      display: block;
      z-index: 1;
  }
  .progressbar li:before {
      width: 30px;
      height: 30px;
      content: '';
      line-height: 30px;
      border: 2px solid #666666;
      display: block;
      text-align: center;
      margin: 0 auto 10px auto;
      border-radius: 50%;
      background-color: white;
      z-index: 999999;
  }
  .progressbar li:first-child:after {
      content: none;
  }
  .progressbar li.active {
      color: green;
  }
  .progressbar li.active:before {
      border-color: #55b776;
  }
  .progressbar li.active + li:after {
      background-color: #55b776;
  }
<div class="container">
      <ul class="progressbar">
          <li >aaaaaa</li>
          <li class="active">bbbbbbbbbt</li>
          <li>cccccccc</li>
          <li>ddddddddd</li>
  </ul>
  </div>

¿Could I get some help to solve this problem, or where could I start looking?

I think it's all said, but please, if I left something, I'll try to complete the post.

Thanks in advance,

Solution

  • You must give the element a position-value in order to use z-index. Just apply position: relative; to the .progressbar li:before-element:

    .container {
  width: 600px;
  margin: 100px auto;
}

.progressbar li {
  list-style-type: none;
  width: 25%;
  float: left;
  font-size: 12px;
  position: relative;
  text-align: center;
  text-transform: uppercase;
  color: #666666;
}

.progressbar li:after {
  width: 100%;
  height: 2px;
  content: '';
  position: absolute;
  background-color: #666666;
  top: 15px;
  left: -50%;
  display: block;
}

.progressbar li:before {
  width: 30px;
  height: 30px;
  content: '';
  line-height: 30px;
  border: 2px solid #666666;
  display: block;
  text-align: center;
  margin: 0 auto 10px auto;
  border-radius: 50%;
  background-color: white;
  position: relative;
  z-index: 1;
}

.progressbar li:first-child:after {
  content: none;
}

.progressbar li.active {
  color: green;
}

.progressbar li.active:before {
  border-color: #55b776;
}

.progressbar li.active+li:after {
  background-color: #55b776;
}
    <div class="container">
  <ul class="progressbar">
    <li>aaaaaa</li>
    <li class="active">bbbbbbbbbt</li>
    <li>cccccccc</li>
    <li>ddddddddd</li>
  </ul>
</div>