fixed元素遮挡内容是因为它脱离文档流，主内容自动填补其原位置；最稳解法是给主内容容器加padding-top（顶部悬浮）或padding-bottom（底部悬浮），值严格等于悬浮条高度。
fixed悬浮条为什么总遮住首屏内容
因为 position: fixed 让元素完全脱离文档流，浏览器不会为它预留空间——它原来占的位置被主内容直接“填上”，结果就是导航栏盖住了标题或轮播图。
这不是 JS 能动态修的，必须靠 CSS 主动预留。最稳做法是给主内容容器加 padding-top（顶部悬浮）或 padding-right（右侧悬浮），值严格等于悬浮条高度/宽度。
- 如果悬浮条高度不固定（比如响应式后变高），用 JS 动态读取
offsetHeight并写入内联style，但首次渲染仍可能闪一下 - 别给
body加margin-top：某些 CMS 或框架会重置 body margin，导致计算失效 - 用
calc(100vh - Xpx)做高度时，X 必须是像素值，百分比或 em 会失效
sticky 和 fixed 到底选哪个
position: sticky 看起来更“智能”，但它依赖父容器状态：一旦父级有 overflow: hidden、transform 或高度不足，它就退化成 normal 定位，完全不吸顶。
position: fixed 行为确定、兼容性好（IE11+），只要算对 padding-top 就不会出错。模板里默认选它，不是因为它高级，而是因为它不甩锅。
- sticky 的
top: 0是相对于父容器顶部的偏移，不是视口；fixed 的top: 0才真正锚定视口顶部 - 移动端 iOS Safari 对 sticky 的支持仍有偶发 bug，尤其在软键盘弹出后
- 如果你的导航父容器是
flex或grid，且设置了align-items: center，sticky 可能根本触发不了临界点
右侧/左侧悬浮条怎么避免和 footer 冲突
右侧悬浮按钮设 bottom: 24px 很常见，但如果页面有 position: sticky 的 footer，或者底部广告位高度不固定，它就会被盖住或挤出屏幕。
更可靠的做法是用 JS 监听 scroll 和 resize，动态计算安全 bottom 值：
- 取
document.body.scrollHeight - window.innerHeight - footer.offsetHeight作为最大可允许的 bottom - 用
Math.max(24, safeBottom)保证最小间距，同时不越界 - 避免直接操作
element.style.bottom，改用element.classList.toggle('bottom-safe')配合 CSS 变量更易维护
iOS Safari 上 fixed 元素突然“粘住不动”怎么办
这是历史遗留问题：iOS Safari 在某些条件下会把 fixed 元素临时降级为 absolute 行为，典型触发场景是输入框获得焦点、页面有 -webkit-overflow-scrolling: touch、或父容器设了 overflow: hidden。
缓解手段有限，但以下三点必须做：
- 给 fixed 元素加
transform: translateZ(0)或will-change: transform，强制启用 GPU 加速 - 确保它的任意祖先节点都没设
overflow: hidden—— 连header或main都要检查 - 不要依赖
user-scalable=no来“修复”，它既破坏可访问性，又在 iOS 16+ 后被部分限制
复杂点在于：这些限制不是报错，而是静默失效，你得在真机上滚动、点输入框、切后台再切回来才能复现。上线前至少在三台不同 iOS 版本的设备上摸一遍。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
