Question

需要删除与进度圈重叠的线。尝试放入“溢出：隐藏”，但是没有用。

我知道这是一些简单的CSS技巧，但无法解决。

这是代码。

#msform {
  text-align: center;
  position: relative;
  margin-top: 30px
}

#progressbar {
  margin-bottom: 30px;
  overflow: hidden;
  counter-reset: step
}

#progressbar li {
  list-style-type: none;
  text-transform: uppercase;
  font-size: 9px;
  width: 33.33%;
  float: left;
  position: relative;
  letter-spacing: 1px
}

#progressbar li:before {
  content: counter(step);
  counter-increment: step;
  width: 24px;
  height: 24px;
  line-height: 26px;
  display: block;
  font-size: 12px;
  color: #333;
  background: grey;
  border-radius: 25px;
  margin: 0 auto 10px auto
}

#progressbar li:after {
  content: '';
  width: 100%;
  height: 2px;
  background: #7d6b6b;
  position: absolute;
  left: -50%;
  top: 9px
}

#progressbar li:first-child:after {
  content: none
}

#progressbar li.active:before,
#progressbar li.active:after {
  background: #ee0979;
  color: white
}

<form id="msform">
  <!-- progressbar -->
  <ul id="progressbar">
    <li class="active">Step 1</li>
    <li>Step 2</li>
    <li>Step 3</li>
  </ul>
</form>

Answer 1

将 z-index 添加到#progressbar li:before

#progressbar li:before {
   z-index: 5;
   position: relative;
}

z-index CSS属性设置定位元素及其后代或flex项目的z顺序。 Z索引较大的重叠元素会覆盖Z索引较小的元素。

Already answered an example

#msform{text-align:center;position:relative;margin-top:30px}#progressbar{margin-bottom:30px;overflow:hidden;counter-reset:step}#progressbar li{list-style-type:none;text-transform:uppercase;font-size:9px;width:33.33%;float:left;position:relative;letter-spacing:1px}#progressbar li:before{content:counter(step);counter-increment:step;width:24px;height:24px;line-height:26px;display:block;font-size:12px;color:#333;background:grey;border-radius:25px;margin:0 auto 10px auto;z-index: 5;
position: relative;}#progressbar li:after{content:'';width:100%;height:2px;background:#7d6b6b;position:absolute;left:-50%;top:9px}#progressbar li:first-child:after{content:none}#progressbar li.active:before,#progressbar li.active:after{background:#ee0979;color:white}

<form id="msform">
    <!-- progressbar -->
    <ul id="progressbar">
        <li class="active">Step 1</li>
        <li>Step 2</li>
        <li>Step 3</li>
    </ul>
</form>

Answer 2

这不是溢出问题，而是堆叠顺序。您只需将z-index添加到li:before即可使其处于堆栈的最高位置：

#progressbar li:before {
    position: relative; /* add this */
    z-index: 1;  /* add this */
    content: counter(step);
    counter-increment: step;
    width: 24px;
    height: 24px;
    line-height: 26px;
    display: block;
    font-size: 12px;
    color: #333;
    background: grey;
    border-radius: 25px;
    margin: 0 auto 10px auto;
}

CSS-背景颜色溢出问题

2 个答案: