在 CSS/HTML 中更改切换开关的位置答案

【问题标题】：Change position of toggle switch in CSS/HTML在 CSS/HTML 中更改切换开关的位置
【发布时间】：2021-02-13 14:09:43
【问题描述】：

我在下面有一个拨动开关，我正试图将它放置在我页面上的其他位置，但由于某种原因，它并没有越过这个微小的空间气泡。我在 .switch{ 下添加了“顶部”和“左侧”元素，但是当我增加数字时，按钮保持不变。有谁知道如何解决这一问题？其他类中有位置元素，每当我更改数字时，拨动开关和文本都会变得一团糟。我希望能够完全移动按钮。

html:

<label class="switch">
<input type="checkbox" id="togBtn">
<div class="slider round">
   <!--ADDED HTML -->
   <span class="on">ON</span>
   <span class="off">OFF</span>
   <!--END-->
</div>
</label>

css:

.switch {
  position: absolute;
  display: inline-block;
  width: 90px;
  height: 34px;
  top: 500;
  left: 600;
}

.switch input {display:none;}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ca2222;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #2ab934;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(55px);
  -ms-transform: translateX(55px);
  transform: translateX(55px);
}

.on
{
  display: none;
}

.on, .off
{
  color: white;
  position: absolute;
  transform: translate(-50%,-50%);
  top: 50%;
  left: 50%;
  font-size: 10px;
  font-family: Verdana, sans-serif;
}

input:checked+ .slider .on
{display: block;}

input:checked + .slider .off
{display: none;}


.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;}

【问题讨论】：

位置值需要一个单位。像素什么的，不只是一个数字，除非数字是 0

标签： html css button position toggle

【解决方案1】：

顶部和左侧值需要单位，例如。 500px、50rem 或 10% 但为什么要添加位置 :absolute 在 .switch 类中，如果您的情况需要位置，则可以，但使用绝对定位开关不是正确的解决方案

【讨论】：