barre de progression dans css à l'intérieur de bootstrap modal z-index numéro

Question

J'ai mon progresbar écrit en CSS et la ligne entre le premier et le deuxième cercle plane un peu le nombre "2". Les lignes entre les cercles sont des pseudo-éléments.

Ce sont les styles que j'ai utilisé:

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

est ici jsFiddle du problème:

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

pour ".progressbar li: après" maintenant son z-index: 1; faites ce z-index: -1; et indice-z: 1; pour ".progressbar li" votre ul item.