我似乎无法弄清楚如何让线条位于圆圈下面。 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>
答案 0 :(得分:3)
我从您的问题中了解到,您希望自己的线条位于这些圈子后面,只需在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;
}