
绝对定位元素脱离普通文档流,位置取决于定位参照和偏移。手机溢出可能来自固定偏移、父级高度或变换,不一定只由图片宽度造成,需要先找到完整的位置计算关系。
确认真正的定位参照
查看元素的position、祖先定位状态以及left、right、top等计算值。桌面设定的像素偏移在窄屏未必合理,transform还可能再次移动对象。不要只把图片宽度改成百分比,却让外层定位容器继续固定在屏幕之外。
判断是否需要脱离内容流
小型装饰或明确叠放内容可以采用绝对定位,主要图片和大段说明通常适合自然布局。后续文字被图片压住,可能是父级没有按内容留空间;不能为每页手填一个高度,抵消不同文案与图片的真实尺寸。

协调尺寸和空间占用
保持图片比例,检查max-width、偏移边界及父级必要空间。手机可以改为自然排列,不用隐藏溢出裁掉重要产品信息。确需叠放时,确认目标在支持宽度内不会覆盖标题、表单和固定联系条,并能在内容更新后继续保持合理位置。
验证窄屏和加载过程
检查最窄屏、横屏、文字放大及图片加载前后,观察横向滚动和布局变化。再看页面后续内容是否被压住。最终记录仍使用绝对定位的对象及其用途,避免复制模板时把临时偏移扩散到更多页面。
关键区别

绝对定位:脱离普通内容流;父级未必自动留白。
偏移变换:共同决定位置;不能只改图片宽度。
窄屏处理:保护主要信息;不要裁切掩盖错误。
怎样确认处理到位
图片完整且保持比例,支持宽度内无横向溢出和正文覆盖,加载前后空间稳定,按钮及联系入口可用,定位用途和回退方式均清楚。
容易误判的边界
不应对所有溢出统一设置overflow:hidden。那可能只是藏起错误位置,也把用户需要的信息或键盘焦点一起裁掉。
