进度条线消失CSS

Question

我有这个进度条，当它位于<header>之外时，显示了步骤之间的线条，但由于需要z-index，所以这些线条在<header>内部不会显示1}}标签。 像这样：

如果我更改z-index，则该行会通过以下方框：

我不知道是否有解决方法，但如果您有任何想法，请告诉我们！

我的相关部分代码：

＆＃13;

＆＃13;

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;
    }

＆＃13;

<header>
    <div class="container">
        <div class="navbar">
            <div class="navbar-brand">
                <a href="/" id="logo" class="logo" alt="Home">
                    <img src="logo.png" class="hidden-sm"/>
                </a>
            </div>
        </div>
    </div>
    <div class="container">
        <div class="row">
            <div class="col-md-12 progressbar">
                <form id="msform">
                    <!-- progressbar -->
                    <ul id="progressbar">
                        <li class="active">Account Setup</li>
                        <li>Social Profiles</li>
                        <li>Personal Details</li>
                    </ul>
                </form>
            </div>
        </div>
    </div>
</header>

＆＃13;

＆＃13;

＆＃13;