title: Progress bar lines disappears CSS
body: <p>I have this progressbar and when it stands outside the <code>&lt;header&gt;</code> the lines between the steps is showing, but because of a needed <code>z-index</code> the lines doesn't show when its inside the <code>&lt;header&gt;</code> tag. 
  Like this: <a href="https://i.stack.imgur.com/Kf2xV.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Kf2xV.png" alt="enter image description here"></a></p>
  
  <p>If I change the <code>z-index</code> the line goes through the boxes like this: 
  <a href="https://i.stack.imgur.com/FIQ8b.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/FIQ8b.png" alt="enter image description here"></a></p>
  
  <p>I don't know if there's a workaround this, but if you have any ideas, please let me know! </p>
  
  <p>My code for the relevant parts:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
      background: #000;
  }
  
  header {
      background-image: url("http://texturemate.com/image/view/1560/_original");
      background-repeat: no-repeat;
      background-size: cover;
      padding: 0;
  }
  
  /*form styles*/
      #msform {
          width: 400px;
          margin: 50px auto;
          text-align: center;
          position: relative;
      }
  
      /*progressbar*/
      #progressbar {
          margin-bottom: 30px;
          overflow: hidden;
          /*CSS counters to number the steps*/
          counter-reset: step;
      }
      #progressbar li {
          list-style-type: none;
          color: white;
          text-transform: uppercase;
          font-size: 9px;
          width: 33.33%;
          float: left;
          position: relative;
      }
      #progressbar li:before {
          content: counter(step);
          counter-increment: step;
          width: 50px;
          line-height: 50px;
          display: block;
          font-size: 10px;
          color: #333;
          background: white;
          border-radius: 50%;
          margin: 0 auto 5px auto;
      }
      /*progressbar connectors*/
      #progressbar li:after {
          content: '';
          width: 100%;
          height: 2px;
          background: white;
          position: absolute;
          left: -50%;
          top: 25px;
          z-index: -1; /*put it behind the numbers*/
      }
      #progressbar li:first-child:after {
          /*connector not needed before the first step*/
          content: none;
      }
      /*marking active/completed steps green*/
      /*The number of the step and the connector before it = green*/
      #progressbar li.active:before,  #progressbar li.active:after{
          background: #27AE60;
          color: white;
      }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;header&gt;
      &lt;div class="container"&gt;
          &lt;div class="navbar"&gt;
              &lt;div class="navbar-brand"&gt;
                  &lt;a href="/" id="logo" class="logo" alt="Home"&gt;
                      &lt;img src="logo.png" class="hidden-sm"/&gt;
                  &lt;/a&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="container"&gt;
          &lt;div class="row"&gt;
              &lt;div class="col-md-12 progressbar"&gt;
                  &lt;form id="msform"&gt;
                      &lt;!-- progressbar --&gt;
                      &lt;ul id="progressbar"&gt;
                          &lt;li class="active"&gt;Account Setup&lt;/li&gt;
                          &lt;li&gt;Social Profiles&lt;/li&gt;
                          &lt;li&gt;Personal Details&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/form&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/header&gt;</code></pre>
  </div>
  </div>
  </p>