position: fixed 实现贴顶需同时设置 top: 0、left: 0 和 width: 100%，并注意 z-index、文档流影响及移动端软键盘导致的偏移问题；position: sticky 则依赖父容器可滚动且无 transform 等属性干扰。
用 position: fixed 让元素真正贴顶
直接写 position: fixed; top: 0; 就能实现——它不看父级、不随滚动动、也不受嵌套层级影响。关键在于“相对于视口定位”，不是相对于父容器。所以哪怕你把目标元素塞在十层 div 里，只要加这行 CSS，它就立刻钉在屏幕最顶上。
常见错误是只设 top: 0 却忘了 left: 0 或 width: 100%，结果元素窄窄一条飘在左上角；或者漏掉 z-index，被后面的内容盖住。
-
position: fixed会让元素脱离文档流，后续内容会“上移”填补空位，必须手动预留空间 - 不要给父元素加
transform、filter或perspective，否则fixed在部分浏览器（尤其是旧版 Safari）会退化为absolute - 移动端软键盘弹出时，某些安卓 WebView 会重置视口高度，导致
top: 0偏移，需监听resize事件微调
为什么 position: sticky 有时不吸顶
position: sticky 看起来更“智能”，但它的行为依赖父容器：只有当父容器可滚动、且未设置 overflow: hidden 时，top: 0 才生效。一旦父级有 transform: translateZ(0) 或 will-change: transform，sticky 就彻底失效，降级为普通流内元素。
典型场景：你在 .container { overflow-y: auto; height: 500px; } 里放一个 .header { position: sticky; top: 0; }，本意是让 header 在容器内吸顶——但如果这个 .container 同时有 transform: scale(1)，那 header 就完全不会固定。
- sticky 的“吸附点”是父容器边界，不是视口，所以无法替代
fixed实现全局顶部固定 - 必须显式声明
top、bottom、left或right中至少一个，否则无效 - 表格中给
th加position: sticky; top: 0;是安全的，因为table元素天然不触发 sticky 失效条件
防止内容被遮挡的两种实用方案
固定元素盖住正文是最常被忽略的问题。解决方案不是靠猜高度，而是用可维护的方式预留空间：
- 给
body加padding-top：值等于固定元素的计算高度（含border和padding），适合全站统一头部 - 给主内容区（如
.main）加margin-top：更灵活，尤其适用于不同页面头部高度不一致的情况 - 避免用
height硬编码，改用calc(100vh - 60px)类动态适配时，注意vh在 iOS Safari 中会随地址栏隐藏/显示变化，建议配合 JS 动态更新
移动端兼容性与细节陷阱
在 iOS Safari 和部分安卓 WebView 上，position: fixed 表现不稳定——滚动时闪动、软键盘弹起后错位、甚至整个元素消失。这不是 bug，而是渲染机制限制。
核心问题在于：这些浏览器把 fixed 元素绑定到“可视区域”而非“布局视口”，而软键盘会压缩可视区域，但不触发 resize 事件。
- 简单修复：给 fixed 元素加
backface-visibility: hidden或transform: translateZ(0)强制硬件加速（但注意这可能触发上面说的 fixed 失效） - 更稳妥做法：监听
focus和blur事件，在输入框聚焦时临时移除fixed，改用absolute+top动态计算 - 绝对不要依赖
document.body.scrollTop判断滚动位置，iOS Safari 下它始终为 0，改用window.scrollY
固定定位看着简单，真正落地时最难的不是写那三行 CSS，而是预判它在各种设备、各种交互状态下的行为偏差。尤其是嵌套结构 + 移动端 + 输入场景，几乎必然要 fallback 到 JS 辅助控制。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
