用css在滑块的中心插入图形

Question

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

我尝试离开 CSS 并手动将 div 定位在滑块上，但后来我意识到我希望我的 div 位于滑块轨道上方但位于可移动光标下方。我无法单独使用 z-index 来实现这一点。

我还尝试在可运行轨道上使用“之前”和“之后”事件，这样我就可以从那里添加离散的内容。一旦我知道我必须使用inline-block，这有点奏效，但我再一次无法让 z-index 很好地发挥作用，而且它总是在可移动光标上方。

在这两种情况下，我显然都没有实现我想要的重叠行为，但同样值得注意的是，我无法让任何行为“干净”地表现出来，我可以使用现有滑块的坐标参考框架来放置我的中间-bar（类似于 "width:2%; left: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>