使用相对单位（如vh、%）替代px定位fixed元素，结合env()处理安全区域，可有效解决移动端位置偏移问题。
在移动端使用 position: fixed 时，经常会出现元素位置偏移的问题，尤其是在 iOS 设备上。这通常是因为浏览器对视口（viewport）的处理方式不同，比如地址栏、导航栏的显示/隐藏会影响实际可视区域的高度，导致基于固定像素定位的元素错位。
解决这个问题的关键是避免依赖绝对像素值（如 top: 20px），改用相对单位如百分比（%）、视窗单位（vw/vh）来定义位置，使元素更适应动态变化的屏幕空间。
使用 vh 单位替代 px 控制垂直位置
在移动端，视窗高度会因浏览器 UI 的展开或收起而变化。使用 vh（视窗高度的 1%）可以更好地适配这种变化。
例如，将一个底部固定按钮从 bottom: 0 微调到刚好避开安全区域或防止被遮挡：
立即学习“前端免费学习笔记（深入）”；
.fixed-bottom-btn {
position: fixed;
bottom: 2vh; /* 距离底部 2% 视窗高度 */
left: 50%;
transform: translateX(-50%);
padding: 10px 20px;
background: #007AFF;
color: white;
border-radius: 8px;
}
相比 bottom: 10px，2vh 在不同设备和状态下更稳定。
用百分比调整水平居中或侧边定位
对于左右定位，使用 % 配合 transform 可以实现响应式居中或偏移，避免受设备宽度影响。
比如一个右下角提示气泡：
.toast {
position: fixed;
right: 5%; /* 距离右侧 5% */
bottom: 5%; /* 距离底部 5% */
width: 90%;
max-width: 300px;
transform: translateX(0); /* 不需要额外偏移 */
background: rgba(0,0,0,0.8);
color: white;
padding: 12px;
border-radius: 8px;
}
这里用 5% 代替 10px 或 20px，让间距随屏幕尺寸自适应。
结合 env() 处理刘海屏和安全区域
为了进一步优化在 iPhone 等设备上的显示效果，可结合 CSS 环境变量 env() 避开安全区域。
例如保持底部元素不被圆角或指示条遮挡：
.safe-fixed-bottom {
position: fixed;
bottom: max(2vh, env(safe-area-inset-bottom) + 4px);
left: 5%;
width: 90%;
}
这样既使用了相对单位，又兼容了安全区域的留白，提升用户体验。
基本上就这些。用 % 或 vw/vh 替代 px 定位 fixed 元素，能显著减少移动端偏移问题，配合 safe-area-inset 效果更佳。不复杂但容易忽略。
