position: fixed 适合头部/底部固定但需设 top/bottom，易受干扰；position: sticky 更自然适配吸顶，但受限于父容器 overflow 和 transform；移动端 fixed 易失效，sticky 更稳定。
用 position: fixed 实现头部/底部固定最直接
只要元素不依赖父容器定位流，position: fixed 就是首选。它让元素脱离文档流，相对于视口（viewport）定位，滚动时保持位置不变。
常见错误是忘记设置 top 或 bottom —— 没有这些偏移值，fixed 元素会默认卡在原位置（即文档流中原本的 top/left），滚动后可能“消失”或错位。
-
top: 0+width: 100%固定顶部，需注意是否被其他样式（如margin或transform）干扰 -
bottom: 0+width: 100%固定底部，同样要确保父容器没设overflow: hidden挡住它 - 移动端 Safari 对
fixed支持较弱，尤其在输入框弹出软键盘时，可能触发重排导致定位失效
为什么 position: sticky 更适合“吸顶”头部
position: sticky 是“条件性固定”：元素在滚动到某临界点前按正常流布局，到达阈值后才变成 fixed 效果。它比 fixed 更自然，不会遮挡内容，也不影响文档高度计算。
关键限制是必须配合 top（或 bottom）使用，且父容器不能有 overflow: hidden|auto|scroll，否则 sticky 失效。
立即学习“前端免费学习笔记（深入）”；
- 头部吸顶写法：
position: sticky; top: 0;，父级最好设z-index避免被盖住 - 不能用于
body直接子元素——部分浏览器（如旧版 Chrome）不支持，建议包一层<header> - 不支持嵌套在
transform、filter或perspective有值的祖先元素内
避免 fixed 元素遮挡主内容的两种常用补救方式
固定定位元素脱离流，后续内容会“上移”，造成文字被盖住。必须手动为主要内容区域预留空间。
最稳妥的做法不是靠 JS 计算高度，而是用纯 CSS 预留：
- 给主体内容加
padding-top（对应头部高度）或padding-bottom（对应底部高度） - 或者用
margin-top推开，但要注意 margin 可能被外边距合并影响 - 若头部高度动态（如响应式字号变化），优先用
padding+calc()或 CSS 自定义属性配合 JS 更新
header {
position: fixed;
top: 0;
width: 100%;
height: 60px;
z-index: 100;
}
main {
padding-top: 60px; /* 与 header 高度一致 */
}移动端 fixed 定位失效的典型场景和绕过方法
iOS Safari 在页面缩放、软键盘弹出、地址栏显示/隐藏时，会临时重置 fixed 元素的位置，表现为“跳动”或“卡在错误位置”。这不是 bug，而是渲染策略所致。
没有银弹方案，但可降低影响：
- 避免在
fixed元素内放input或textarea；把表单移到非 fixed 区域 - 禁用双指缩放：
<meta name="viewport" content="user-scalable=no">（仅限必要场景） - 用
position: absolute+ JS 监听scroll+requestAnimationFrame模拟 fixed（性能差，慎用） - 对简单页脚，考虑不用 fixed，改用 Flex 布局的
margin-top: auto推到底部
复杂交互下，sticky 的兼容性和稳定性通常优于 fixed，尤其在现代 iOS 上。
