如何在进度条中添加标记？

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>