html中无原生alert横幅，需用div+position:fixed实现顶部/底部通知；js控制显隐时须防重复添加、手动关闭残留及自动关闭前校验；移动端需vw宽度、aria-label、高度限制和硬件加速。
HTML里没有alert横幅，只有window.alert()弹窗
浏览器原生的alert()是阻塞式弹窗，会暂停脚本执行、锁住页面交互，完全不是“横幅”——它不嵌在页面流里，也不能用CSS精细控制位置或样式。真要实现顶部/底部通知横幅，必须手写HTML结构 + CSS定位 + JS控制显隐。
用div + position: fixed做基础横幅结构
横幅本质是脱离文档流的覆盖层，position: fixed最直接可靠，兼容性好（IE8+），且不随滚动偏移：
<div id="notify-banner" style="position: fixed; top: 0; left: 0; right: 0; z-index: 1000;"> <div>操作成功！</div> </div>
-
top: 0确保贴顶，若需底部横幅改用bottom: 0 -
z-index必须足够高，否则可能被其他fixed元素（如导航栏）遮盖 - 别用
position: absolute——它相对最近定位祖先，滚动时会消失 - 横幅内容建议包一层内层
div，方便后续加padding、背景色和居中
JS控制横幅显示/隐藏时的关键细节
横幅不是“弹出来就完事”，用户交互和自动关闭逻辑容易出错：
- 显示时用
element.style.display = 'block'或切换class，避免用visibility: hidden——它仍占空间 - 自动关闭推荐
setTimeout，但必须在关闭前检查横幅是否已被手动关闭，否则可能报错：if (banner && banner.parentNode) banner.remove() - 手动关闭按钮需绑定
click事件并调用remove()，别只设display: none——残留DOM节点可能积累内存 - 如果页面有多个横幅需求，每次创建新
div后记得document.body.appendChild()，别重复添加
移动端适配和可访问性容易被忽略的点
横幅在手机上常被误切、遮挡或无法关闭，屏幕阅读器也可能读不到：
立即学习“前端免费学习笔记（深入）”；
- 加
width: 100vw替代right: 0，防止横屏时右侧留白（尤其Safari） - 关闭按钮必须有
aria-label="关闭通知"，否则视障用户无法识别功能 - 横幅高度别超过视口的20%，否则遮挡主要内容，iOS Safari会把地址栏推上去造成布局抖动
- 用
transform: translateZ(0)触发硬件加速，避免fixed横幅在某些Android机型上闪烁
横幅看着简单，但滚动行为、焦点管理、多实例清理、屏幕阅读器播报顺序这些地方，不测真实设备很容易翻车。
