position: fixed 是底部悬浮条唯一可靠方案，需设 bottom: 0、left: 0、right: 0 铺满宽度，配合 z-index ≥ 1000、opacity + transform 动画及 env(safe-area-inset-bottom) 适配，并通过 localStorage 持久化关闭状态。
底部悬浮条用 position: fixed 最直接
浏览器视口底部固定显示，不随滚动消失，position: fixed 是唯一可靠方案。绝对定位（position: absolute）会随父容器滚动而移位，不适合全局通知栏。
关键点：bottom: 0 + left: 0 + right: 0 控制宽度铺满，高度自行设（如 height: 48px），再加 z-index 确保压在其他内容之上（建议 ≥ 1000）。
常见错误：忘了设 width: 100% 或漏掉 left/right，导致在部分浏览器中宽度异常；或者 z-index 太小，被 modal、header 等遮住。
通知栏内容要可关闭，用 aria-label 和键盘支持
用户点击 × 关闭后，需隐藏而非仅视觉消失，否则仍占用 DOM 和屏幕阅读器焦点。推荐用 display: none 或切换 class 控制显隐。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 关闭按钮必须带
type="button"，避免表单意外提交 - 添加
aria-label="关闭通知"，满足无障碍要求 - 支持
Escape键关闭：监听document.addEventListener('keydown', ...)，判断e.key === 'Escape' - 关闭后建议用
localStorage记录状态（如localStorage.setItem('notice_closed', 'true')），下次加载跳过显示
动画入场别用 transition 配 display
display 属性无法触发 CSS 过渡，强行写 transition: display 0.3s 无效。正确做法是用 opacity + transform 控制淡入上滑效果，再配合 visibility 或 height 控制布局占位。
示例关键 CSS：
footer-notice {
opacity: 0;
transform: translateY(20px);
transition: opacity 0.3s ease, transform 0.3s ease;
}
footer-notice.show {
opacity: 1;
transform: translateY(0);
}
JavaScript 触发时，先添加 show 类，不要直接操作 style.display。若需完全移除 DOM，应在动画结束后用 addEventListener('transitionend', ...) 清理。
移动端适配要注意 viewport 和安全区域
iOS Safari 底部有手势返回区，纯 bottom: 0 可能被遮挡或触发误操作。需用 env(safe-area-inset-bottom) 补齐：
padding-bottom: env(safe-area-inset-bottom); 或 bottom: env(safe-area-inset-bottom);
同时确保 <meta name="viewport"> 包含 viewport-fit=cover，否则 env() 变量不生效：
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
安卓部分浏览器不支持 env()，可降级为 JS 检测 window.innerHeight 与 screen.height 差值，但多数现代 WebView 已兼容。
