html - 伪元素的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

我从你的问题中了解到，你希望你的线在那些圆圈后面，只需在你的 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;
}