悬浮广告窗需用 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 放在
