javascript - 除了使用位置：绝对，然后使用位置：...之外，还有其他方法可以使工作成为滑块

Question

你好:) 我想知道：每次我想使用滑块时，我都必须在 position:relative 中定义一个父元素，在 position:absolute 中定义他的子元素，然后使用 javaScript 玩左边的位置使其移动。

举个例子：

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

每次我想这样做时，我都觉得使用 position: absolute 感到不舒服。

有没有更好的方法，而不使用 position:absolute 来使滑块工作？

标签： javascriptcss

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>