除了使用position：absolute，然后使用position：...，还有其他方法可以使滑块工作

Question

您好:)我想知道：每次我想使用滑块时，都必须在位置：relative定义一个父元素，在位置：absolute定义其子元素，然后使用javaScript播放左侧位置以使其移动。

例如：

thisElement.style.left = 100 + "px";

我只是在使用姿势时感到不舒服：每次我要这么做时绝对会感到不舒服。

有没有一种更好的方法，而无需使用position：absolute使滑块工作？

Answer 1

您实际上不需要使用position: absolute。

.bar {
  height: 30px;
  width: 300px;
  background-color: red;
}

.slider {
  display: inline-block;
  height: 50px;
  width: 50px;
  border-radius: 25px;
  background-color: blue;
  transform: translateX(50px)
}

<div class="bar">
<div class="slider">

</div>
</div>