Bar fill 和 Bar unfilled 不重叠

Question

我正在尝试创建一个 CSS 进度条，但是由于某些原因，UNFILL 部分（白色背景）没有与 FILL 部分的绿色背景重叠。

知道怎么做吗？

另外，由于这是一个@Keyframe CSS3，所以这只能或不能用于哪个浏览器？

CSS:

.container{
  width: 400px;
  margin: 0 auto;

}

.bar{
  width: 100%;
  background: #141414;
  padding: 17px;
  -webkit-border-top-right-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
-moz-border-radius-topright: 5px;
-moz-border-radius-bottomright: 5px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}

.bar-fill{
  height: 15px;
  display: block;
  background: #45c9a5;
  width: 0%;
  border-radius: 8px;

  -webkit-transition: width 0.8s ease;
  transition: width 0.8s ease;
  -webkit-animation: mymove 5s infinite; 
  animation: mymove 5s infinite;
}


.bar-unfill{
  height: 15px;
  display: block;
  background: #fff;
  width: 100%;
  border-radius: 8px;
}

/* Chrome, Safari, Opera */ 
@-webkit-keyframes mymove {
    from {width: 0%;}
    to {width: 100%;}
} 

/* Standard syntax */ 
@keyframes mymove {
   from {width: 0%;}
    to {width: 100%;}
}



.title{
 background: #545965;
 color: #fff;
 padding: 15px;
 float: left;
 position: relative;
 right: 60px;
-webkit-border-top-left-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-bottomleft: 5px;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}

这是 JSFIDDLE：https://jsfiddle.net/xdbb3ypc/1/

谢谢！

请同时提供 JSFIDDLE

Answer 1

只需将 'filled' 部分放在 'unfilled' 内，即：

<div class="container">
    <div class="title">Testing</div>
    <div class="bar">
        <span class="bar-unfill">
            <span class="bar-fill"></span>
        </span>
    </div>
</div>

Answer 2

您应该将填充的条放在未填充的条内，以允许在其上方绘制它

<div class="container">
<div class="title">Testing</div>
  <div class="bar">
    <span class="bar-unfill">
        <span class="bar-fill"></span>
    </span>    
  </div>
</div>

JSFiddle：https://jsfiddle.net/z4kn3p40/

Bar fill 和 Bar unfilled 不重叠

Bar fill and Bar unfilled doesn't ovelap

html

css

progress