顶部通知横幅需用padding-top防遮挡、localStorage持久化关闭状态、flex布局防压缩、并处理焦点与无障碍；fixed定位本身不遮内容，但需主动管理布局与可访问性。
直接用 <div role="alert"> + <code>position: fixed 就能做出顶部通知横幅，但真正卡住人的从来不是“怎么显示”，而是“怎么不遮内容、不打断焦点、关了就真不出现”。
为什么 position: fixed 之后正文被盖住了
因为 fixed 元素脱离文档流，后续内容从视口顶部开始渲染，自然被横幅压住。这不是 bug，是 CSS 行为本身。
- 给
加padding-top，值等于横幅的offsetHeight（推荐 JS 动态读取，防响应式变高） - 别用
margin-top：可能触发 margin collapse，尤其在<header></header>前加时容易失效 - 如果页面已设
box-sizing: border-box，记得把 padding 算进总高度，否则滚动条可能意外出现
关闭按钮点了没反应 or 刷新又弹出来
常见原因是状态没持久化，或 DOM 操作和存储不同步。
- 关闭时必须同步执行：
localStorage.setItem('banner_closed', 'true') - 页面加载时检查：
if (localStorage.getItem('banner_closed') === 'true') { banner.style.display = 'none'; } - Safari 无痕模式会拒绝写入
localStorage，建议包一层try/catch - 别用
sessionStorage：关掉标签页就清空，用户刚点完 ×，换 tab 再回来又弹，体验断裂
横幅里文字和关闭按钮在小屏上挤成一团
Flex 默认会压缩子项，尤其 iOS Safari 对 flex: 1 支持不稳定，老版本 IE11 更是直接忽略。
立即学习“前端免费学习笔记（深入）”；
- 文字容器设
flex: 1; min-width: 0;+text-overflow: ellipsis;防溢出 - 关闭按钮加
flex-shrink: 0;，确保不被压缩 - 横向间距别依赖
gap（Safari 14.1 以下不支持），改用margin-left: auto推右，或显式margin-left - 移动端媒体查询中，同步调小
padding和font-size，否则文字贴边甚至截断
最常被跳过的其实是销毁时机和焦点管理：横幅关闭后，键盘焦点落在哪？屏幕阅读器是否还感知到它？element.remove() 是干净解法，但如果要复用 DOM，至少得补上 aria-hidden="true" 和 tabindex="-1"。这些细节不处理，横幅就只是个“看得见的装饰”。
