absolute分屏错位主因是父容器未设position: relative，导致子元素定位基准为视口；须设relative以建立定位上下文，再用absolute+top/left/width/height+z-index叠放两层，并注意移动端viewport声明与拖拽性能优化。
为什么absolute定位做分屏对比容易“错位飘走”
直接给两个子容器设position: absolute，却不处理父容器的定位上下文，是错位主因。浏览器会把left: 0、right: 0等值解析为相对于视口（viewport）而非你写的那个“分屏容器”。结果就是左栏贴到浏览器最左边，右栏飞出屏幕右侧，滚动时完全不跟随。
必须给父容器显式加position: relative——哪怕它只是个空<div>。这是所有absolute分屏的前提，不是可选项。<h3>如何让左右两层真正“重叠对比”而不是并排显示</h3>
<p>要实现“前后对比”（比如原图 vs 处理后图），不是左右并列，而是同一区域叠放。关键在层级和尺寸控制：</p>
<ul>
<li>父容器设<code>position: relative; width: 100%; height: 100vh（或明确高度）
position: absolute; top: 0; left: 0; width: 100%; height: 100%，再加z-index: 1
position: absolute; top: 0; left: 0; width: 100%; height: 100%，但z-index: 2，并加opacity: 0.8或mix-blend-mode: difference增强对比感transform: translateX()模拟滑动——它会创建新层叠上下文，干扰z-index顺序移动端上absolute分屏对比为何常失效
不是代码写错了，是浏览器限制：
- iOS Safari 和 Android Chrome 默认禁用
resize，但这里的问题更基础：position: absolute本身在小屏上若没配合viewport设置，容易因缩放导致尺寸计算失准 - 必须加
<meta name="viewport" content="width=device-width, initial-scale=1">，否则100vh在 iOS 上可能取的是视觉视口（visual viewport），滚动时高度跳变 - 慎用
vw单位做left偏移——IE 不支持，iOS 旧版 Safari 对calc(50vw - 20px)这类表达式解析不稳定 - 如果要做拖拽滑块控对比比例（如 30% 原图 / 70% 处理图），别依赖
resize事件，改用touchstart/move/end+requestAnimationFrame更新clip-path或mask
absolute分屏对比的隐藏性能陷阱
看似轻量，但有两处容易掉帧：
- 每次拖拽都直接改
style.left或style.width，会强制同步重排（reflow），尤其当上层含大量文本或SVG时 - 用
opacity做透明度渐变，若没加will-change: opacity，GPU 合成可能不启用，动画卡顿明显 - 更稳做法：用
transform: translateX()移动上层容器（不触发布局），配合overflow: hidden在父容器上裁切，比改width高效得多 - 不要在
touchmove里读取getBoundingClientRect()——它会触发重排，应缓存初始尺寸，只算相对位移
绝对定位做对比，核心不在“怎么叠”，而在“叠得稳不稳”。父容器缺position: relative、移动端缺viewport声明、拖拽时硬写width——这三处，90% 的失败都卡在这儿。
