最轻量可关闭公告栏用无需js，但需默认展开则用checkbox hack配合css动画，js仅存localstorage状态；结构要语义化、关闭按钮独立可聚焦且带aria-label；移动端用position: sticky替代fixed，多公告需单容器轮播管理。
怎么用原生 HTML + CSS 实现可关闭的公告栏
直接用 <div> 搭配内联样式或简单 class 就能跑起来，不需要框架或 JS 也能关闭（靠 <code><details></details> 或 checkbox hack），但真要“好用”，得支持手动关闭、不遮挡关键操作、且刷新后不重复弹出——这就得加一点点 JS 来存状态。
- 最轻量方案：用
<details><summary></summary></details>，点击展开/收起，无需 JS，但无法默认展开+自动关闭 - 实用方案：用
<div> + 一个隐藏的 <code><input type="checkbox">控制显隐，CSS 控制过渡动画，JS 仅用于 localStorage 记录关闭状态 - 别用
position: fixed顶在顶部还盖住导航栏——改成position: sticky或插在<header></header>后面更稳妥
公告栏 DOM 结构怎么写才利于维护和关闭
结构要扁平、语义清晰，关闭按钮必须是独立可聚焦元素，方便键盘用户操作。避免把整个公告包进一个 <button></button> 里（会误触关闭）。
<div class="notice-bar" data-id="v1.2-update"> <span class="notice-text">新版已上线：支持暗色模式和快捷键 Ctrl+K</span> <button type="button" class="notice-close" aria-label="关闭此通知">×</button> </div>
-
data-id用来标识公告版本，后续 JS 靠它判断是否已关闭过 -
aria-label必须写，否则屏幕阅读器读不出按钮作用 - 不要用
<i></i>或伪元素做 ×，确保可点击区域足够大（至少 44×44px）
怎么用 localStorage 让用户关一次就记住，不刷页面又弹
关键不是“存没存”，而是“存什么”和“什么时候读”。存的是 notice-closed-v1.2-update 这样的 key，值可以是 "1" 或 timestamp，但别存整个对象。
- 页面加载时立即检查
localStorage.getItem('notice-closed-' + id)，存在就element.remove()或element.style.display = 'none' - 点击关闭按钮时，立刻执行
localStorage.setItem('notice-closed-' + id, '1')，然后移除 DOM 节点（别只 hide） - 注意：Safari 无痕模式下
localStorage会直接抛QuotaExceededError，要用 try/catch 包一层
移动端适配和 z-index 容易踩的坑
公告栏在 iPhone 上常被虚拟键盘顶上去、或被 iOS 的“返回手势”区域遮住左边缘——这不是 bug，是 Safari 对 position: fixed 的特殊处理。
- 改用
position: sticky+top: 0，让它随页面滚动但始终贴顶，兼容性够用（iOS 15.4+） - 如果必须用
fixed，加inset: env(safe-area-inset-top) 0 auto 0避开刘海和底部指示器 -
z-index别乱设 9999，先查当前页面最高 z 值（比如导航栏是 100），公告设成 101 即可；设太高反而可能盖住 modal 或 tooltip
真正麻烦的是多公告轮播场景——别硬塞多个 .notice-bar 并列，用一个容器 + JS 控制单条显示，否则 localStorage 状态管理和 DOM 清理会失控。
