绝对定位是开关轨道和按钮的首选，因其能使滑块脱离文档流、紧贴轨道边缘移动且不破坏父容器结构，但前提是轨道必须设为position: relative。
绝对定位为什么是开关轨道和按钮的首选
因为开关的轨道（track）和滑块（thumb）需要脱离文档流、精确对齐，且尺寸固定、位置强约束。相对定位会保留原始占位，flex 或 grid 在小尺寸控件中反而增加布局干扰，而 position: absolute 能让 thumb 紧贴 track 内部边缘移动，同时不破坏父容器结构。
关键前提是：track 必须设为 position: relative，否则 absolute 的 thumb 会相对于 body 或最近定位祖先偏移，导致错位。
如何用 ::-webkit-slider-thumb 和 ::-webkit-slider-runnable-track 做基础样式
原生 <input type="range"> 在 Chrome/Safari 中可通过伪元素定制，但它们默认是 inline 元素，且 thumb 没有宽高继承，必须显式设置 appearance: none 才能生效。
-
input[type="range"]必须加-webkit-appearance: none（Firefox 用appearance: none） -
::-webkit-slider-runnable-track设为height+border-radius+background，就是轨道 -
::-webkit-slider-thumb设width/height+border-radius+background+margin-top（用于垂直居中），并加-webkit-appearance: none - Firefox 需额外写
input[type="range"]::-moz-range-thumb和::-moz-range-track
用 position: absolute 替代伪元素实现更可控的开关
伪元素兼容性差（尤其 IE 完全不支持）、无法绑定事件、动画受限。更稳妥的方式是用两个 <div>：一个做轨道（<code>relative），一个做按钮（absolute），再用 JS 控制 left 值切换状态。
示例结构：
<div class="switch-track"> <div class="switch-thumb"></div> </div>
对应 CSS：
-
.switch-track：设position: relative、width、height、border-radius、background -
.switch-thumb：设position: absolute、top: 50%、transform: translateY(-50%)、width/height、background、border-radius - 初始状态设
left: 2px（关），激活状态用类如.is-on改为left: calc(100% - 22px)（假设 thumb 宽 20px，留 2px 边距）
移动端点击区域小、拖动不跟手？补这三处
绝对定位开关在手机上常出现点不中、滑动卡顿、松手后回弹等问题，根源不是定位本身，而是交互层缺失。
- 给
.switch-track加cursor: pointer和-webkit-tap-highlight-color: transparent - 给
.switch-thumb加touch-action: pan-x（禁用默认纵向滚动干扰） - JS 中监听
mousedown/touchstart后，立即preventDefault()并绑定mousemove/touchmove，避免页面滚动抢事件 - 不要用
transition: left .2s做开关切换——它会在拖动时产生冲突，应只对「点击切换」加 transition，拖动过程用 JS 实时设置style.left
绝对定位本身没毛病，问题总出在轨道没设 relative、thumb 没居中、移动端 touch 事件没接管——这三个点漏掉任一个，开关就容易偏移或失灵。
