底部固定悬浮条应使用 position: fixed + bottom: 0，显式设置 width: 100%、left: 0 和 z-index ≥ 1000；纯文字居中推荐 text-align: center 配合 line-height；body 需设 padding-bottom 等于条高以防遮挡；关闭时用 display: none。
底部固定悬浮条用 position: fixed 实现
直接给容器设 position: fixed + bottom: 0 是最稳妥的方式，兼容所有现代浏览器，包括 iOS Safari。不要用 position: sticky，它在底部固定场景下行为不可靠，尤其在滚动容器或页面高度不足时会失效。
关键点：
-
width: 100%必须显式设置，否则 fixed 元素默认收缩为内容宽度 - 加
left: 0防止某些旧版安卓浏览器偏移 - 建议设
z-index: 1000以上，避免被弹窗、广告等遮盖
纯文字居中用 text-align + line-height
公告条通常只有一行文字，text-align: center 配合固定高度和 line-height 是最轻量、最可控的居中方式。Flex 布局虽然也能做，但多一层嵌套、多写几行 CSS，还可能触发某些浏览器的渲染 bug（比如微信内置浏览器对 align-items 的处理异常）。
示例结构：
<div class="footer-banner">? 系统维护中，部分功能暂不可用</div>
CSS 写法：
.footer-banner {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 44px;
line-height: 44px;
text-align: center;
background: #fff;
color: #333;
font-size: 14px;
z-index: 1001;
}
避免遮挡页面内容要预留 body padding-bottom
fixed 元素脱离文档流，如果不处理，会被它盖住原本在底部的操作按钮、链接或表单提交区。最简单有效的办法是给 加 padding-bottom，值等于公告条高度。
常见错误：
- 用
margin-bottom—— 对 body 无效 - 只给最后一个子元素加 margin —— 页面结构一变就失效
- 用 JS 动态计算高度 —— 完全没必要，增加复杂度和潜在 bug
直接写：
body {
padding-bottom: 44px;
}
移动端适配注意字体大小和点击区域
44px 高度既是视觉舒适区，也是 iOS/Android 推荐的最小可点击区域。如果文字用了 rem 或 em，确保根字体不随系统缩放剧烈变化；更稳妥的做法是用 px 固定字号（如 14px），再配合 min-height: 44px 防止文字撑高容器。
另外，iOS 上 fixed 元素在软键盘弹出时可能错位，解决方法是监听 focus 事件临时隐藏公告条，或者加 transform: translateZ(0) 强制硬件加速（仅当真遇到错位时再加，别无脑加）。
真正容易被忽略的是：公告条是否需要响应用户关闭操作。如果支持手动关闭，务必用 display: none 而不是 visibility: hidden，否则仍占用 fixed 布局空间，padding-bottom 就白加了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
