备案栏应优先用flexbox实现粘性底部而非fixed：外层min-height:100vh+flex column，主内容flex:1，备案栏自然居底；ios fixed会因视口分离跳动，需用env(safe-area-inset-bottom)或滚动监听模拟吸底。
fixed底部备案栏会遮挡内容，必须手动预留空间
用 position: fixed 实现备案栏最直接，但元素脱离文档流，正文不会自动避开它。常见错误是只写 footer { position: fixed; bottom: 0; }，结果文字被盖住。
解决方法是给主体内容加 padding-bottom 或 margin-bottom，值必须严格等于备案栏高度：
- 若备案栏高
32px，则.main { padding-bottom: 32px; } - 若用
margin-bottom，需确保父容器没有overflow: hidden，否则可能裁剪 - 响应式场景下，高度变化时（如移动端字体放大），硬编码像素值容易失效，建议配合
calc()或 CSS 变量动态控制
内容少时要“粘底”，不能只靠 fixed
备案栏不是永远固定在视口底部——当页面内容不足一屏时，用户希望它贴在内容末尾；内容多时才固定在视口底边。这是典型的“粘性底部”（sticky footer）需求，position: fixed 无法自动切换行为。
推荐用 Flexbox 实现：
- 外层容器设
display: flex; flex-direction: column; min-height: 100vh; - 主内容区加
flex: 1;，强制撑满剩余空间 - 备案栏不设
position，自然位于容器底部 - 此方案在 Safari、Chrome、Firefox 中兼容稳定，无需 JS 干预
iOS Safari 下 fixed 底部会跳动或悬空
这不是 bug，是 Safari 把「视觉视口」（visual viewport）和「布局视口」（layout viewport）分开了。软键盘弹出、地址栏收放都会导致 bottom: 0 失效，备案栏飘在半空。
临时规避手段有限，但可降低影响：
- 避免在输入框聚焦时让备案栏紧贴键盘上方；改用
position: absolute+bottom: env(safe-area-inset-bottom)配合@supports检测 - 监听
resize和focusin事件，动态切换fixed/absolute，但注意 iOS Safari 的 resize 触发不可靠 - 更稳妥的做法：放弃底部固定，改用页面末尾静态布局，通过 JS 滚动监听模拟“吸底”，仅在必要时启用
备案栏要不要用 z-index？要看是否与其他 fixed 元素共存
只要用了 position: fixed，就自动进入新层叠上下文，z-index 生效。但多数备案栏不需要显式设置——除非同时存在返回顶部按钮、悬浮客服、广告浮层等其他 fixed 元素。
常见冲突点：
- 返回顶部按钮通常设
z-index: 9999，备案栏设z-index: 100即可保证在下层 - 若备案栏含链接，iOS Safari 中
z-index过高可能导致点击穿透，建议不超过999 - 不要依赖默认
z-index: auto，不同浏览器对未声明值的处理不一致
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
