progressbar in css innerhalb modal bootstrap z-index ausgabe

Question

ich habe meine progresbar in css geschrieben und zeile zwischen ersten und zweiten kreis schwebt ein wenig die nummer "2". Die Linien, die Kreise sind, sind Pseudoelemente.

Dies sind die Stile i verwendet:

/* progressbar */ 
.progressbar { 
    width: 100%; 
    counter-reset: step; 
    margin-top: 7px; 
    padding: 0; 
} 

.progressbar li { 
    list-style-type: none; 
    float: left; 
    width: 100px; 
    position: relative; 
    text-align: center; 
    font-family: sans-serif; 
    font-size: 15px; 
    font-weight: normal; 
    color: #546A79; 
    /* Steps*/ 
} 

.progressbar li:before { 
    content: counter(step); 
    counter-increment: step; 
    width: 44px; 
    height: 44px; 
    line-height: 44px; 
    /* border: 4px solid #fff; */ 
    display: block; 
    text-align: center; 
    margin: 0 auto 13px auto; 
    border-radius: 50%; 
    background-color: #E3E3E3; 

    /* Circles*/ 
} 

.progressbar li:after { 
    content: ''; 
    position: absolute; 
    width: 100%; 
    height: 4px; 
    background-color: #E3E3E3; 
    /*lines */ 
    top: 20px; 
    left: -50%; 
    z-index: 0; 
} 

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

.progressbar li.active { 
    color: #546A79; 
} 

.progressbar li.active:before { 
    width: 48px; 
    height: 48px; 
    line-height: 48px; 
    border-radius: 50%; 
    border-color: #0073CF; 
    color: black; 
    background-color: #ffda47; 
    margin: 0 auto 9px auto; 

} 

.progressbar li.active + li.active:after { 
    background-color: #ffda47; 
} 

Hier jsfiddle des Problems:

http://jsfiddle.net/1aeur58f/523/

Answer 1

.progressbar li { 
    list-style-type: none; 
    float: left; 
    width: 100px; 
    position: relative; 
    text-align: center; 
    font-family: sans-serif; 
    font-size: 15px; 
    font-weight: normal; 
    color: #546A79; 
    z-index:1; 
} 


.progressbar li:after { 
    content: ''; 
    position: absolute; 
    width: 100%; 
    height: 4px; 
    background-color: #E3E3E3; 
    /*lines */ 
    top: 20px; 
    left: -50%; 
    /*z-index: 0;*/ 
    z-index: -1; 
} 

Answer 2

für ".progressbar li: nach" jetzt seinem z-index: -1; Mach diesen Z-Index: -1; und Z-Index: 1; für ".progressbar li" dein ul item.