固定定位用 position: fixed，以视口为参考系，滚动时保持位置不变；absolute 是相对于已定位祖先元素，滚动会移动。
绝对定位元素怎么固定在视口某个位置
用 position: fixed，不是 position: absolute。这是最常被混淆的点：绝对定位（absolute）是相对于最近的已定位祖先元素定位，而固定定位（fixed）才真正“固定在视口”，滚动时也不动。
常见错误是写了 position: absolute 又加 top: 0; right: 0;，结果一滚动就消失——那只是贴在父容器右上角，不是贴屏幕右上角。
-
fixed元素脱离普通文档流，不占空间，不影响其他元素布局 - 它以视口（viewport）为参考系，不是父元素，所以无需设置祖先元素
position: relative - 注意 z-index：如果被遮挡，大概率是层级太低，加
z-index: 1000类似值即可
fixed 元素如何避开页面头部或底部导航栏
直接靠 top/bottom 值硬设容易和 sticky 导航、footer 冲突。更稳妥的做法是结合 calc() 或预留空间。
- 顶部固定且要避开 64px 高的导航栏？写
top: calc(64px + env(safe-area-inset-top))，兼顾常规屏和刘海屏 - 右侧固定按钮不想被 iOS 底部手势条盖住？用
right: env(safe-area-inset-right) - 如果父容器有
transform、perspective或filter，会创建新的包含块，导致fixed失效——此时降级用absolute+ 监听scroll手动更新top/left
移动端 fixed 元素卡顿或闪烁怎么办
iOS Safari 对 fixed 渲染有优化限制，尤其在快速滚动时可能出现跳动、延迟甚至短暂消失。
立即学习“前端免费学习笔记（深入）”；
- 给元素加
will-change: transform或transform: translateZ(0)触发硬件加速 - 避免在
fixed元素内使用overflow: scroll—— 改用-webkit-overflow-scrolling: touch（仅旧版 iOS）或外层包裹一个position: relative容器再做内部滚动 - 不要对
fixed元素频繁修改top/left（比如 scroll 事件里直接改），改用transform: translateY()更平滑
fixed 元素在 iOS 微信内置浏览器中失效
微信 iOS 版（尤其旧版本）会禁用部分 fixed 行为，典型表现是滚动时元素跟着动，或者键盘弹出后错位。
- 确保根元素
<html>和<body>没有height: 100%或overflow: hidden，这些会干扰视口计算 - 键盘弹出时，iOS 会缩放视口，导致
fixed偏移。可监听focus事件，在输入框聚焦时临时切为position: absolute，失焦再切回 - 微信 8.0.30+ 已修复大部分问题，但低端机型仍建议加兜底：用
IntersectionObserver检测是否“可视”，异常时手动重置top
getBoundingClientRect() + scroll 节流的手动锚定逻辑。 
