html - 如何向进度条添加标记？

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>