如何將圓圈後面的一行移至圓圈底部

Question

我正在使用多步驟進度欄。我需要將圓圈（代表步驟）放在行的頂部。我使用:after將該行添加到一個圓圈。我用z-index將這個圓圈放在最上面，但它不起作用。有任何想法嗎？

這裏是的jsfiddle：http://jsfiddle.net/gaqz77qf/1/

.visuallyhidden { 
 
    display: none; 
 
} 
 
.wizard-progress { 
 
    list-style: none; 
 
    list-style-image: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    margin-top: 20px; 
 
    float: left; 
 
    white-space: nowrap; 
 
} 
 
.wizard-progress li { 
 
    float: left; 
 
    text-align: center; 
 
    position: relative; 
 
} 
 
.wizard-progress .step-name { 
 
    display: table-cell; 
 
    height: 32px; 
 
    vertical-align: bottom; 
 
    text-align: center; 
 
    width: 100px; 
 
    z-index: 100; 
 
} 
 
.wizard-progress .step-name-wrapper { 
 
    display: table-cell; 
 
    height: 100%; 
 
    vertical-align: bottom; 
 
} 
 
.wizard-progress .step-num { 
 
    border: 2px solid #ddd; 
 
    border-radius: 50%; 
 
    width: 24px; 
 
    height: 24px; 
 
    display: inline-block; 
 
    margin-top: 10px; 
 
    z-index: 100; 
 
} 
 
.wizard-progress .step-num:after { 
 
    content: ""; 
 
    display: block; 
 
    background: #CCC; 
 
    height: 15px; 
 
    width: 85px; 
 
    position: absolute; 
 
    bottom: 5px; 
 
    left: 58px; 
 
    z-index: 0; 
 
} 
 
.wizard-progress li:last-of-type .step-num:after { 
 
    display: none; 
 
} 
 
.wizard-progress .active-step .step-num { 
 
    background-color: #ff0500; 
 
}

<ol class="wizard-progress clearfix"> 
 
    <li class="active-step"> 
 
    <span class="step-name"> 
 
      Foo 
 
     </span> 
 
    <span class="visuallyhidden">Step </span> 
 
    <span class="step-num">1</span> 
 
    </li> 
 
    <li> 
 
    <span class="step-name">Bar</span> 
 
    <span class="visuallyhidden">Step </span> 
 
    <span class="step-num">&hearts;</span> 
 
    </li> 
 
    <li> 
 
    <span class="step-name">Baz</span> 
 
    <span class="visuallyhidden">Step </span> 
 
    <span class="step-num">3</span> 
 
    </li> 
 
    <li> 
 
    <span class="step-name">Quux</span> 
 
    <span class="visuallyhidden">Step </span> 
 
    <span class="step-num">4</span> 
 
    </li> 
 
</ol>

Answer 1

我改變了你的z-index爲-1，並在酒吧頂部的圈層，我認爲這可能是你是什麼尋找：

Line 56:  z-index: -1;