在带有CSS的滑块的中心插入图形

Question

我试图为CSS中的滑块绘制'中心'部分，但遇到了麻烦。这是我目标的无风格模型：centerslider.png

我尝试在CSS外面，并在滑块上手动定位DIV，但后来我意识到我希望DIV在滑块轨道上方，但在可移动的光标下方。我无法单独使用z索引来实现这一目标。

我还尝试在可运行的曲目上使用"之前"one_answers" after"事件，以便从那里添加离散的内容。一旦我得知我必须使用内联块，这有点奏效，但是我再一次无法让z索引播放得很好，而且它始终是可移动的光标。

在这两种情况下，我显然都无法实现我想要的重叠行为，但也值得注意的是，我难以"干净地"，我可以使用现有滑块的坐标参考框架来放置我的中间-bar（将其放置为"宽度：2％；左：49％"）。

我确实在一些示例中看到了类似的功能，但是由于其他原因，它们过于复杂，我很难从中收集很多东西。如果有人可以将我指向资源或资源或描述使此工作所需的最低限度要素，那将有助于提高我对CSS的个人理解。我不喜欢学习，但我认为我至少需要指向正确的方向。

Answer 1

是您想要的吗？使用position:absolute对齐

.slidecontainer .fa-square {
position:absolute;
top:10px;
left:50px;
}
.slider {
  -webkit-appearance: none;
  height: 8px;
  background: #d3d3d3;
  outline: none;
  border-radius: 5px;
}
.slider:hover {
  opacity: 1;
}
.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 12px;
  height: 12px;
  background: #4CAF50;
  cursor: pointer;
  border-radius: 5px;
  position:relative;
  z-index: 2
}
.slider::-moz-range-thumb {
  width: 25px;
  height: 25px;
  background: #4CAF50;
  cursor: pointer;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="slidecontainer">
<input type="range" min="1" max="100" value="50" class="slider" id="myRange">
  <i class="fa fa-square"></i>
</div>