擬似要素のz-インデックス位置付け

Question

円を円の下に配置する方法を理解できないようです。 Z-indexは機能していないので、divを非静的に配置しています。どうすればこれを達成できますか？アイデアは、サークルと重なる線の部分がサークルの背後に配置されることです。

div.step-line { 
 
    margin: 0; 
 
} 
 

 
div.step-col { 
 
    padding: 30px 0; 
 
    text-align: center; 
 
} 
 

 
div.step-line div.step-title:before { 
 
    right: 50%; 
 
} 
 

 
div.step-line div.step-number { 
 
    font-size: 26px; 
 
    border-radius: 50%!important; 
 
    display: inline-block; 
 
    margin: auto; 
 
    padding: 9px; 
 
    border: 3px solid #e5e5e5; 
 
    position: relative; 
 
    z-index: 5; 
 
    height: 60px; 
 
    width: 60px; 
 
    /*text-align: center;*/ 
 
} 
 

 
div.step-line div.step-title { 
 
    position:relative; 
 
    font-size: 20px; 
 
    font-weight: 400; 
 
    text-transform: uppercase; 
 
} 
 

 
div.step-line div.step-title:after { 
 
    content: ''; 
 
    height: 3px; 
 
    width: 100%; 
 
    position: absolute; 
 
    background-color: #e5e5e5; 
 
    z-index: 4; 
 
    transform: translateY(-100%); 
 
    top: -90%; 
 
    left: 0%; 
 
} 
 

 
div.step-line div.step-col.first div.step-title:after { 
 
    width: 50%; 
 
    left: 50%; 
 
} 
 

 
div.step-line div.step-col.last div.step-title:after { 
 
    width: 50%; 
 
    right: 50%; 
 
}

<div class="row step-line"> 
 
    <div class="col-md-4 step-col first"> 
 
    <div class="step-number">1</div> 
 
    <div class="step-title">This is a step title</div> 
 
    <div class="step-content">This is a description</div> 
 
    </div> 
 
    <div class="col-md-4 step-col"> 
 
    <div class="step-number">2</div> 
 
    <div class="step-title">This is a step title</div> 
 
    <div class="step-content">This is a description</div> 
 
    </div> 
 
    <div class="col-md-4 step-col last"> 
 
    <div class="step-number">3</div> 
 
    <div class="step-title">This is a step title</div> 
 
    <div class="step-content">This is a description</div> 
 
    </div> 
 
</div>

Answer 1

何私はあなたの質問から理解している、あなたは、あなたの行がちょうどあなたのCSS

決勝で背景色background-color: white;を追加し、それらの円の後ろになりたいですコード：

div.step-line div.step-number { 
    font-size: 26px; 
    border-radius: 50%!important; 
    display: inline-block; 
    margin: auto; 
    padding: 9px; 
    border: 3px solid #e5e5e5; 
    position: relative; 
    z-index: 5; 
    height: 60px; 
    width: 60px; 
    /*text-align: center;*/ 
    background-color: white; 
}