位置已设置,但z-index无效

时间:2018-09-18 09:41:58

标签: javascript html css sass

我想创建一个进度条,但是CSS出现问题。
我希望圆圈被线遮住,但不起作用。
演示如下:

HTML:

Access List -> Modules:
   File>Filelist ... yes
Access List -> Tables (listing):
   File Metadata ... yes
   File Reference ... yes
   File Storage ... yes
Access List -> Tables (modify):
   File ... yes
   File Collection ... yes
   File Metadata ... yes
   File Reference ... yes
   File Storage ... yes
Access List -> Allowed excludefields:
   File Metadata: yes to all
   File Collection: yes to all
Access List -> Limit to languages ... yes to all
ol {
  display: table;
  table-layout: fixed;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

li {
  position: relative;
  display: table-cell;
  text-align: center;
}

li:after {
  content: "";
  position: relative;
  z-index: 1000;
  display: block;
  width: 2em;
  height: 2em;
  margin: 0 auto;
  line-height: 2em;
  color: #fff;
  border: 0.2em #e1e1e1 solid;
  border-radius: 100%;
}

li:not(:last-child):before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: -1;
  display: block;
  width: 100%;
  height: 0.2em;
  background-color: #e1e1e1;
}

codepen

3 个答案:

答案 0 :(得分:2)

如果我对您的理解正确,则只需在&:after选择器上设置background-color而不是color

&:after {
  background-color: #fff;
}

答案 1 :(得分:1)

只需为您的圈子添加背景:

ol {
  display: table;
  table-layout: fixed;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

li {
  position: relative;
  display: table-cell;
  text-align: center;
}

li:after {
  content: "";
  position: relative;
  z-index: 1000;
  display: block;
  width: 2em;
  height: 2em;
  margin: 0 auto;
  line-height: 2em;
  color: #fff;
  border: 0.2em #e1e1e1 solid;
  border-radius: 100%;
  background:white;               /* add this */
}

li:not(:last-child):before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: -1;
  display: block;
  width: 100%;
  height: 0.2em;
  background-color: #e1e1e1;
}
<ol>
  <li>
    Order received
  </li>
  <li>
    Order received
  </li>
  <li>
    Order received
  </li>
  <li>
    Order received
  </li>
  <li>
    Order received
  </li>
</ol>

答案 2 :(得分:0)

将背景色添加到

&:after {background:#fff;}

,您的代码即可正常工作。