顶部通知横幅应使用而非或，因其语义明确标识紧急提醒；需添加aria-live="polite"确保屏幕阅读器播报，关闭按钮用并调用element.remove()彻底移除dom节点。
通知横幅的HTML结构怎么写才合理
语义上，顶部通知不是导航也不是主内容，用 <aside></aside> 或带 role="alert" 的 <div> 更合适。避免用 <code><header></header>（它属于页面结构元素）或 <section></section>（语义过重）。常见错误是直接套个 <div class="banner"> 但没加可访问性属性，导致屏幕阅读器无法识别为实时提醒。
<ul>
<li>必须设置 <code>aria-live="polite"（首次显示时读出），若需中断当前朗读则用 aria-live="assertive"
<button></button> 不要用 <a href="#"></a> 模拟，否则键盘焦点和语义都失效tabindex="-1" 可防止它被意外 tab 进入（除非它本身需要键盘操作）关闭按钮点击后如何真正隐藏横幅
关键不是只设 display: none，而是兼顾可访问性和状态同步。用户点击关闭后，横幅应从 DOM 中移除或标记为已关闭，否则屏幕阅读器可能仍尝试读取残留内容。
- 推荐用 JavaScript 绑定
click 事件到关闭按钮，调用 element.remove()（现代浏览器支持）或 element.classList.add("hidden") 配合 CSS .hidden { display: none; }
- 如果横幅由服务端注入（如 SSR 渲染），需在 JS 初始化时检查是否有
data-closed="true" 属性，跳过渲染
- 别用
visibility: hidden —— 它仍占布局空间，且屏幕阅读器可能继续读取
CSS定位顶部横幅时容易忽略的兼容性问题
横幅常需固定在视口顶部、不随滚动移动，但 position: fixed 在 iOS Safari 上有历史 bug：软键盘弹出时横幅会错位，且部分安卓 WebView 对 top: 0 解析不稳定。
- 优先用
position: sticky; top: 0 + 父容器设 overflow: clip（现代方案，兼容性较好）
- 若必须用
fixed，加 transform: translateZ(0) 触发硬件加速，减少 iOS 重绘抖动
- 注意 z-index：横幅层级必须高于
<header></header> 和主内容，但低于模态框（通常设 z-index: 1000 足够）
- 不要依赖
vh 单位做高度计算 —— iOS Safari 的 viewport height 在地址栏显示/隐藏时会动态变化，导致横幅遮挡内容
如何让通知横幅支持多实例与自动销毁
单页应用里常出现多个通知叠加，比如表单提交失败 + 权限提示同时触发。硬编码一个横幅节点无法应对，得用运行时生成+队列管理。
- 每个横幅实例应有唯一
id，关闭时通过 document.getElementById(id).remove() 精准移除
- 自动销毁建议用
setTimeout + clearTimeout 组合：显示后 5 秒启动定时器，用户手动关闭则先 clearTimeout 再移除
- 若横幅含链接或操作按钮（如“重试”），需确保事件委托绑定到动态插入的节点，别用
querySelector 查找后直接绑 —— 后续新增的横幅按钮不会响应
click 事件到关闭按钮，调用 element.remove()（现代浏览器支持）或 element.classList.add("hidden") 配合 CSS .hidden { display: none; }
data-closed="true" 属性，跳过渲染visibility: hidden —— 它仍占布局空间，且屏幕阅读器可能继续读取position: fixed 在 iOS Safari 上有历史 bug：软键盘弹出时横幅会错位，且部分安卓 WebView 对 top: 0 解析不稳定。
- 优先用
position: sticky; top: 0+ 父容器设overflow: clip（现代方案，兼容性较好） - 若必须用
fixed，加transform: translateZ(0)触发硬件加速，减少 iOS 重绘抖动 - 注意 z-index：横幅层级必须高于
<header></header>和主内容，但低于模态框（通常设z-index: 1000足够） - 不要依赖
vh单位做高度计算 —— iOS Safari 的 viewport height 在地址栏显示/隐藏时会动态变化，导致横幅遮挡内容
如何让通知横幅支持多实例与自动销毁
单页应用里常出现多个通知叠加，比如表单提交失败 + 权限提示同时触发。硬编码一个横幅节点无法应对，得用运行时生成+队列管理。
- 每个横幅实例应有唯一
id，关闭时通过 document.getElementById(id).remove() 精准移除
- 自动销毁建议用
setTimeout + clearTimeout 组合：显示后 5 秒启动定时器，用户手动关闭则先 clearTimeout 再移除
- 若横幅含链接或操作按钮（如“重试”），需确保事件委托绑定到动态插入的节点，别用
querySelector 查找后直接绑 —— 后续新增的横幅按钮不会响应
id，关闭时通过 document.getElementById(id).remove() 精准移除setTimeout + clearTimeout 组合：显示后 5 秒启动定时器，用户手动关闭则先 clearTimeout 再移除querySelector 查找后直接绑 —— 后续新增的横幅按钮不会响应横幅看似简单，但真实项目里最常出问题的是可访问性缺失和移动端定位偏移，尤其当它和 Vue/React 的 re-render 机制混用时，DOM 状态和组件状态不同步会导致关闭无效或重复渲染。
