顶部通知栏使用 position: fixed 会遮挡正文，需动态设置 body paddingtop、持久化关闭状态、优化小屏 flex 布局、用过渡类安全移除 dom 并管理焦点。
顶部通知栏能“贴住”视口顶部，但默认会遮挡正文——这不是 bug，是 position: fixed 的必然行为；真正要解决的，是它遮了之后内容怎么不被盖、关了之后怎么不反复弹、小屏下文字和按钮怎么不挤成一团。
为什么 position: fixed 一加，正文就不见了
因为 fixed 元素完全脱离文档流，后续元素从视口顶部（y=0）开始渲染，正好被横幅压住。这不是样式写错了，是 CSS 定位机制本身如此。
- 别改
body { margin-top }：可能触发 margin collapse，尤其在<header></header>前失效 - 推荐用
document.body.style.paddingTop = banner.offsetHeight + 'px'动态设置，兼容响应式高度变化 - 如果页面已设
box-sizing: border-box，padding 会算进 body 总高度，避免意外出现双滚动条
关闭按钮点了没反应 or 刷新又弹出来
核心是状态没落盘，或 DOM 操作和存储不同步。仅靠 display: none 只是视觉隐藏，刷新后一切归零。
- 关闭时必须同步执行：
localStorage.setItem('banner_closed', 'true') - 页面加载时先检查：
if (localStorage.getItem('banner_closed') === 'true') { banner.style.display = 'none'; } - Safari 无痕模式会拒绝写入
localStorage，建议包一层try/catch - 别用
sessionStorage：关掉标签页就清空，用户刚点完 ×，换 tab 再回来又弹
小屏上文字和关闭按钮挤在一起、换行错位
根本原因是 flex 默认收缩行为 + Safari/IE 对 flex: 1 支持不稳定，不是字体太小或 padding 不够。
- 文字容器加
flex: 1; min-width: 0; text-overflow: ellipsis; white-space: nowrap; - 关闭按钮加
flex-shrink: 0;，确保不被压缩 - 横向间距别依赖
gap（Safari 14.1 以下不支持），改用margin-left: auto推右 - 媒体查询中同步调小
padding和font-size，否则文字贴边甚至截断
动画消失后 DOM 还在，导致点击穿透或焦点异常
用 display: none 或 visibility: hidden 都不行：前者元素还在 DOM 中占位（只是不可见），后者仍拦截点击；而直接 remove() 又无法复用。
- 推荐加过渡类：
banner.classList.add('notification--hiding')，配合transitionend回调里调用banner.remove() - 动画只用
transform+opacity，禁用height过渡（height: auto不可过渡） - 每条通知必须有唯一
id（如id="top-banner"），否则多实例时定时器和移除逻辑会互相干扰
最常被跳过的其实是销毁后的焦点管理：横幅关闭后，键盘焦点落在哪？是否自动移到主内容起始位置？这在无障碍场景下不是加分项，而是硬性要求。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
