时间戳

首页 > 解决方案 > CSS - 背景颜色溢出问题

html - CSS - 背景颜色溢出问题

问题描述

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

我知道这是一些简单的 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>

标签： htmlcss

解决方案

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

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

z-indexCSS 属性设置定位元素及其后代或弹性项目的 z 顺序。具有较大 z-index 的重叠元素会覆盖具有较小 z-index 的元素。

已经回答了一个例子

#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>

推荐阅读