僞元素的z-index定位

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

我從你的問題理解的是，你希望你的線是那些界的後面，只需添加背景顏色background-color: white;在你的CSS

決賽代碼：

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