用position: fixed实现顶部悬浮横幅需设top:0;left:0;width:100%;z-index:1000，并同步给body加padding-top（值等于横幅高度），否则正文会被遮盖。
直接用 <div> + <code>position: fixed 就能稳稳挂在顶部，但不处理 body 的 padding-top，正文一定会被盖住——这是最常踩的坑。
用 fixed 定位实现悬浮横幅，但必须同步调整 body 间距
横幅本身设 position: fixed 后就脱离文档流，浏览器不会为它留空间。如果只加横幅不碰 body，后续所有内容都会从页面最顶上开始渲染，直接钻进横幅底下。
- 横幅元素需设置：
top: 0、left: 0、width: 100%、z-index: 1000 -
body必须加padding-top，值等于横幅高度（比如padding-top: 60px） - 若横幅高度响应式变化（如移动端缩为 44px），
body的padding-top也得用@media同步调整 - 别依赖
margin-top或空<div> 占位——它们在 <code>fixed元素面前完全无效广告尺寸与 iframe 嵌入时的常见报错
用
<iframe></iframe>接第三方广告（如 AdSense、腾讯 GDT）时，width和height写死是常态，但容易触发“内容被裁剪”或“滚动条意外出现”。- 务必设
frameborder="0"和scrolling="no"，否则默认边框和滚动条会破坏视觉一致性 - 如果广告联盟返回的
src是 HTTP 协议，而你的站点是 HTTPS，浏览器会直接屏蔽并报Mixed Content错误 -
loading="lazy"对横幅广告无效——它只对离屏图片/iframe 生效，顶部横幅永远在首屏，加了反而可能延迟加载 - 某些广告脚本（如
TencentGDT.push）要求容器 DOM 已存在，必须确保调用前document.getElementById('banner_container')能取到节点
关闭按钮 + localStorage 持久化状态的实际写法
用户点一次 × 就不想再看到，不能靠 cookie 或 session，localStorage 是唯一轻量解，但 Safari 无痕模式下会静默失败。
- 关闭按钮绑定：
onclick="closeNotice(); return false;" -
closeNotice()函数内必须用try { localStorage.setItem('bannerClosed', 'true') } catch(e) { }包裹 - 页面加载时检查：
if (localStorage.getItem('bannerClosed') === 'true') { document.querySelector('.top-banner').style.display = 'none'; } - 别用
display: none+ class 切换：如果样式里写了!important，JS 设置可能被覆盖；直接操作style.display最可靠
真正麻烦的不是怎么挂上去，而是横幅高度是否随字体、行高、padding 动态变化，以及移动端是否因 viewport 缩放导致
fixed元素错位——这些没法靠一套 CSS 通吃，得实机测 iOS Safari 和 Chrome Android。 - 务必设
