悬浮广告窗需用 position: fixed/absolute 脱离文档流定位，易被浏览器拦截；display 切换不显示多因 overflow: hidden、z-index 遮挡或 position 缺失；需监听 scroll + getBoundingClientRect 判断视口触发，配合延迟展示等体验优化。

悬浮广告窗不是靠“添加”实现的，而是用 position: fixed 或 position: absolute 控制 div 层脱离文档流并定位在视口指定位置；现代浏览器默认拦截自动弹出的悬浮窗（尤其带遮罩、全屏或无交互触发的），直接写 CSS+HTML 很可能被屏蔽或被用户无视。

为什么 display: none → display: block 切换后不显示？

常见原因是父容器设置了 overflow: hidden，或该 div 被其他层（如 z-index 更高的导航栏）遮挡；也可能是未设置 position 属性导致 top/right 等偏移无效。

• 检查父级是否含 overflow: hidden —— 悬浮层需挂载到 body 直接子元素，避免嵌套过深
• 确保设置了 position: fixed（视口定位）或 position: absolute（相对最近定位祖先）
• 显式声明 z-index: 9999 并确认没有更高值的兄弟元素覆盖它
• 用浏览器开发者工具选中元素，看 computed 样式里 display 是否真为 block，且 visibility 不是 hidden

如何让悬浮窗只在用户滚动到某区域后出现？

不能只靠 CSS，必须监听 scroll 事件，结合 getBoundingClientRect() 判断目标区域是否进入视口。硬编码固定像素值（如 scrollTop > 500）在不同设备上极易失效。

• 给触发区域（比如一个 section）加唯一 id，例如 id="ad-trigger"
• 在 JS 中用 document.getElementById('ad-trigger').getBoundingClientRect().top 获取其顶部距视口顶部距离
• 当该值 （即进入视口 80% 时）再显示广告层
• 记得节流 scroll 事件，用 requestAnimationFrame 或简单时间戳判断，避免高频重绘

关闭按钮点击后广告层不消失？

典型问题是事件绑定失败：DOM 元素尚未加载完成就执行 JS，或使用了动态插入的 HTML 却没用事件委托。另外，remove() 过度暴力，可能导致重复插入逻辑错乱。

• 确保 JS 放在