position: absolute 是滑块指针的必要基础，因其使指针脱离文档流、精准定位在对比图中线且不受缩放或容器尺寸影响；需配合父容器 position: relative 构建局部坐标系，避免 viewport 错位。
为什么 position: absolute 是滑块指针的必要基础
因为滑块指针必须脱离文档流、精准贴合在对比图中间线位置，且不随图片缩放或容器尺寸变化而错位。用 relative 或 static 会导致指针被图片内容推挤，拖动时偏移；fixed 则会脱离容器上下文，滚动时消失。只有 absolute 配合父容器 position: relative 才能锁定在局部坐标系中。
常见错误是忘记给外层容器加 position: relative，结果指针按整个 viewport 定位，一动就飞出图片区域。
- 外层容器（如
.compare-container）必须设position: relative - 指针元素（如
.slider-handle）设position: absolute，并用left或transform: translateX()控制水平位置 - 避免同时设
left和right，否则可能触发浏览器回退到默认值（如 Chrome 中left: auto）
如何用 transform: translateX() 实现平滑拖动而不重排
直接改 left 会触发 layout，尤其在频繁拖动时卡顿明显；transform 只影响合成层，性能好得多。但要注意：它基于元素自身左上角原点，所以需配合 left: 50% + transform: translateX(-50%) 才能让指针中心对准滑动线。
示例结构：
立即学习“前端免费学习笔记（深入）”；
<div class="compare-container"> <img class="before" src="before.jpg"> <img class="after" src="after.jpg"> <div class="slider-handle"></div> </div>
对应 CSS：
.compare-container {
position: relative;
width: 100%;
overflow: hidden;
}
.slider-handle {
position: absolute;
top: 0;
bottom: 0;
width: 4px;
background: #fff;
box-shadow: 0 0 6px rgba(0,0,0,0.5);
left: 50%;
transform: translateX(-50%);
cursor: ew-resize;
}
拖动时怎么让指针实时响应鼠标位置又不越界
核心是监听 mousedown → mousemove → mouseup，并在 mousemove 中计算指针 left 值，再转为 transform 更新。关键限制是：指针只能在容器宽度范围内移动（即 0 ≤ x ≤ containerWidth），否则对比区会露出白边或错位。
- 用
getBoundingClientRect()获取容器真实宽高，别依赖offsetWidth（可能含 padding/border） - 鼠标 X 坐标减去容器左边界 = 相对位置，再用
Math.max(0, Math.min(x, containerWidth))截断 - 更新时只改
style.transform，不要反复设style.left，避免样式冲突 - 记得在
mouseup后清除mousemove监听，防止内存泄漏
移动端 touch 事件适配容易漏掉的三个点
纯鼠标逻辑在 iOS/Android 上基本失效——touchstart/touchmove/touchend 必须单独处理，而且有坑：
-
touchmove默认会触发页面滚动，得加e.preventDefault()，但只在指针拖动时加，别影响正常滚动 - 触摸点取
e.touches[0].clientX，不是e.clientX；多点触控时要明确用第一个点 - iOS Safari 的
position: sticky或某些 zoom 场景下，getBoundingClientRect()返回值可能不准，建议缓存容器尺寸并在resize时更新
最常被忽略的是：没做 pointer-events 隔离，导致手指划过指针时触发了下层图片的 :hover 或点击行为。给 .slider-handle 加 pointer-events: none 再在 JS 里手动绑定事件更稳妥。
