如何在Switch按钮内正确定位SVG图标？

• 解决遮挡问题：检查滑块元素的z-index，确保SVG的层级更高；或者直接把SVG嵌套进滑块元素内部，这样SVG会成为滑块的一部分，不会被遮挡。
• 让图标跟随滑块移动：
  • 最简单的方式是将SVG作为滑块的子元素，滑块移动（比如通过transform: translateX）时，SVG会自动继承这个变换，同步移动。
  • 如果必须分开元素，就在开关状态切换时，给SVG添加对应的transform属性，数值和滑块的移动距离保持一致，同时加上相同的transition过渡动画，保证移动同步。
• 定位修正：如果用绝对定位放置SVG，要确保滑块容器设置了position: relative，这样SVG的定位基准是滑块，而不是整个页面。

示例代码参考 #

把SVG嵌入滑块内部的结构：

<div class="switch-container">
  <input type="checkbox" id="switchToggle">
  <label for="switchToggle" class="switch-slider">
    <svg class="icon" viewBox="0 0 24 24">
      <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
    </svg>
  </label>
</div>

对应的核心CSS：

.switch-container {
  position: relative;
  width: 60px;
  height: 34px;
}
.switch-slider {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #ccc;
  border-radius: 34px;
  transition: background .4s;
  cursor: pointer;
}
.icon {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 28px;
  height: 28px;
  fill: #fff;
  transition: transform .4s;
}
/* 切换状态时的样式 */
#switchToggle:checked + .switch-slider {
  background: #2196F3;
}
#switchToggle:checked + .switch-slider .icon {
  transform: translateX(26px);
}

内容的提问来源于stack exchange，提问作者Katyellen