父容器必须设 position: relative 且宽高明确，否则绝对定位子元素基准漂移；滑块需 absolute + top:0 + height:100% 防塌陷；clip-path 更灵活但旧 safari 不稳定，overflow:hidden 兼容好但需配合 translatex；js 计算须用 clientx 减容器 left 并用 offsetwidth 限范围；touch 事件要 preventdefault + raf 节流 + will-change 加速。
用 position: absolute 叠加两张图时，为什么滑块拖不动或错位？
常见错误是两张图都设 position: absolute 但没共用同一个定位上下文。父容器必须设 position: relative，否则子元素会相对于 body 定位，导致滑块计算基准漂移。
- 父容器必须加
position: relative，且宽高明确（不能靠内容撑开） - 前图（滑块右侧部分）用
left: 0，后图（左侧固定背景）用left: 0+width: 100%，再通过clip-path或overflow: hidden配合滑块位置裁剪 - 滑块本身要设
position: absolute+top: 0+height: 100%，否则高度塌陷
clip-path 和 overflow: hidden 哪个更适合做动态裁剪？
clip-path 更灵活，支持任意形状裁剪，但 Safari 旧版本（inset() 动态值支持不稳定；overflow: hidden 兼容性好，但只能靠父容器宽度控制可见区域，需配合 transform: translateX() 移动前图。
- 用
clip-path: inset(0 <code>calc(100% - var(--pos))0 0) 实现右侧保留、左侧隐藏（--pos是滑块当前位置百分比变量） - 若需兼容 IE 或老 Safari，改用双层结构：外层
overflow: hidden，内层用transform: translateX(calc(-100% + var(--pos))) - 注意：CSS 自定义属性
--pos必须由 JS 实时更新，不能用 CSS 动画模拟拖拽过程
JS 控制滑块位置时，clientX 计算为什么总偏左/偏右？
根本原因是没减去容器的 getBoundingClientRect().left。直接用鼠标坐标除以窗口宽度，会把整个页面当基准，而不是图片容器。
- 必须用
event.clientX - container.getBoundingClientRect().left得到容器内相对横坐标 - 容器宽度要用
container.offsetWidth（不是clientWidth），避免 padding 影响 - 滑块位置限制在
0到container.offsetWidth之间，别让--pos超出范围，否则裁剪失效或白屏
移动端 touch 事件里，为什么滑块卡顿或跳变？
touchmove 触发频率远高于 mousemove，但每次都同步更新 --pos + 触发重排，容易掉帧。另外，没阻止默认行为会导致页面滚动干扰。
立即学习“前端免费学习笔记（深入）”；
- 在
touchstart和touchmove中加event.preventDefault()，禁用滚动 - 用
requestAnimationFrame节流更新样式，不要在touchmove里直接设style.setProperty - 滑块元素加
will-change: transform或transform: translateZ(0)，启用硬件加速
响应式的关键不在“自动适配”，而在于所有尺寸计算（包括 --pos、offsetWidth、clip-path 参数）都基于当前容器实时值——缩放、横竖屏切换、字体加载延迟都可能让容器尺寸异步变化，这时候只靠 CSS 媒体查询是不够的。
