fixed会遮住正文是因为它脱离文档流，后续内容从视口顶部渲染；应给body设置box-sizing: border-box的padding-top（值等于通知条高度）来留出空间，并动态监听resize和字体加载更新该值。
页面顶端通知条必须用 position: fixed，其他定位方式在真实项目中基本不可靠——sticky 会被父级 transform、overflow 或 flex 布局干扰而失效；absolute 会随滚动消失；relative 根本不贴顶。
为什么 fixed 会遮住正文？怎么留出空间
这是 fixed 的正常行为：它脱离文档流，后续内容从视口顶部开始渲染，自然被盖住。不能靠 body { margin-top } 推内容（易触发 margin collapse，且 CMS 可能在 <body> 前插入节点导致失效）。
- 给
<body>设置padding-top，值等于通知条当前高度（比如48px） - 确保
body已设box-sizing: border-box，否则padding会撑高总高度，引发双滚动条 - 如果页面已有适配导航栏的
padding-top，新通知条高度要叠加计算，不能覆盖原有值 - 监听
window.resize和字体加载完成事件（document.fonts.ready），动态更新padding-top
关闭按钮点击后，DOM 怎么清理才真正消失
只设 display: none 或 visibility: hidden 是危险的：刷新后重显；残留 DOM 仍占据 fixed 层叠上下文，可能拦截下方按钮点击（尤其移动端）。
- 点击关闭时，必须同步执行
element.remove()，彻底从 DOM 移除 - 立即调用
localStorage.setItem('top-banner-closed', 'true')，并用try/catch包裹（Safari 无痕模式会拒绝写入） - 每个通知条需有唯一
id（如id="ad-banner-2026-q4"），避免多实例时定时器或移除逻辑互相污染 - 不要用
hidden属性——IE 不支持，且语义不符
小屏下文字换行错位、按钮被挤变形
根本不是字体大小或 padding 的问题，而是 flex 默认收缩行为在 Safari/旧版浏览器中不稳定导致的。
立即学习“前端免费学习笔记（深入）”；
- 文字容器加
flex: 1; min-width: 0; white-space: nowrap; text-overflow: ellipsis; - 关闭按钮加
flex-shrink: 0;，确保不被压缩 - 横向间距别用
gap（IE 和部分 Android WebView 不支持），改用margin - 小屏文案超长时，用
min-height+-webkit-line-clamp控制行数，避免撑高破坏比例
最常被忽略的是：通知条必须带 role="alert"，否则屏幕阅读器不会播报；且 button 关闭控件不能用 span 模拟——这不仅是可访问性问题，也影响键盘焦点流和移动端点击热区。
