如何將標記添加到進度條？

Question

我有一個進度條，我想在某些點添加標記（我找出了在javascript中的位置並以編程方式設置'left'屬性）。我結束了JS代碼後，像這樣運行：

.marker { 
 
    width:2px; 
 
    background-color:#f00; 
 
    position:relative; 
 
}

<!-- div for a progress bar here --> 
 
<div> 
 
--- progress bar here --- --- progress bar here --- --- progress bar here --- 
 
</div> 
 

 
<!-- div for markers here --> 
 
<div> 
 
    <div class="marker" style='left:0%;'>&nbsp;</div> 
 
    <div class="marker" style='left:10%;'>&nbsp;</div> 
 
    <div class="marker" style='left:20%;'>&nbsp;</div> 
 
    <div class="marker" style='left:30%;'>&nbsp;</div> 
 
    <div class="marker" style='left:40%;'>&nbsp;</div> 
 
    <div class="marker" style='left:50%;'>&nbsp;</div> 
 
    <div class="marker" style='left:60%;'>&nbsp;</div> 
 
    <div class="marker" style='left:100%;'>&nbsp;</div> 
 
</div>

我能看到的紅色標記，在進度條下方的正確的相對位置，但我希望他們把他們都在同一層面上彼此重疊。

理想情況下，我希望它們位於進度條之上。

Answer 1

下面是一種方法：https://jsfiddle.net/sheriffderek/qe3rmmd4/ - 但是，我期望這樣的事情可以用canvas或svg來完成。

.progress-bar { 
 
    position: relative; 
 
    width: 100%; 
 
    height: 40px; 
 
    max-width: 200px; 
 
    background: gray; 
 
} 
 

 
.bar { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 23%; 
 
    height: 100%; 
 
    background: blue; 
 
} 
 

 
.marker-list { 
 
    list-style: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    height: 100%; 
 
    width: 100%; 
 
} 
 

 
.marker-list .marker { 
 
    position: absolute; 
 
    top: 0; 
 
    width: 2px; 
 
    height: 100%; 
 
    background-color: red; 
 
}

<div class='progress-bar'> 
 

 
    <div class="bar"></div> 
 

 
    <ul class="marker-list"> 
 
    <li class="marker" style='left:10%;'></li> 
 
    <li class="marker" style='left:20%;'></li> 
 
    <li class="marker" style='left:30%;'></li> 
 
    <li class="marker" style='left:40%;'></li> 
 
    <li class="marker" style='left:50%;'></li> 
 
    <li class="marker" style='left:60%;'></li> 
 
    <li class="marker" style='left:70%;'></li> 
 
    <li class="marker" style='left:80%;'></li> 
 
    <li class="marker" style='left:90%;'></li> 
 
    </ul> 
 

 
</div>