position: fixed 实现浮层广告需闭环控制定位上下文与层级：设足够高z-index、避免父容器创建新堆叠上下文、居中用transform时注意Safari兼容性、确保pointer-events有效；必须由用户明确交互触发，禁用非用户激活的自动弹出；遮罩层需正确设置尺寸、z-index、滚动锁定与可访问性；关闭逻辑应延迟绑定并避免DOM操作错误。
position: fixed 是实现网页浮层广告最直接、兼容性最好的方式，但光加这个属性远远不够——浏览器会拦、移动端会偏、辅助技术会误读、SEO 会降权。关键不在“怎么浮起来”，而在“怎么浮得稳、不被拦、不碍事”。
为什么 position: fixed 常失效或遮不住内容？
常见现象是广告窗一闪而过、被导航栏盖住、或在 iOS 上错位。根本原因不是 CSS 写错了，而是定位上下文和层级控制没闭环：
- 没设
z-index，或值不够高（比如只写999，而轮播图用了1000）； - 父容器有
transform、filter或will-change，意外创建了新的 stacking context，把fixed元素“框死”在局部； - 用
top: 50%; left: 50%; transform: translate(-50%, -50%)居中，在 Safari 缩放或 iOS 横屏时会漂移； - 没加
pointer-events: auto（默认是auto，但若父层设了none就全废了）。
如何让浮层广告不被浏览器拦截？
现代浏览器（Chrome 88+、Safari 16.4+、Edge 90+）对非用户触发的浮层极其敏感。哪怕你用 setTimeout 延迟 100ms 弹出，只要没绑定到真实点击/触摸事件，就大概率被静默屏蔽，控制台只报：Blocked opening 'xxx' in a new window because the request was made without user activation.
- 广告浮层必须由用户**明确交互**触发，例如：首屏“立即体验”按钮点击、表单提交成功后、或“展开详情”箭头点击；
- 禁止在
DOMContentLoaded、load、scroll、intersectionObserver回调里直接显示浮层； - 如果必须“首次访问展示”，可用
localStorage记录是否已弹过，再把首次弹出绑定到用户第一次点击任意可点击元素（如nav a或footer button）； -
window.open()和<dialog></dialog>的showModal()在广告场景下基本不可用——前者必拦，后者无用户激活会抛Failed to execute 'showModal' on 'HTMLDialogElement'。
遮罩层（overlay）怎么写才不踩坑？
遮罩不是加个半透明 div 就完事。它要挡住内容、不挡键盘、不挡屏幕阅读器焦点、关闭后能恢复滚动位置。
- 遮罩
div必须用position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;，不能用100%（在某些 iOS 场景下高度算不准）； - 必须设
z-index高于浮层广告本身（例如广告z-index: 10000，遮罩就至少9999）； - 禁滚动要两步走：打开时
document.body.style.overflow = 'hidden';，同时记录const savedY = window.scrollY;；关闭时先window.scrollTo(0, savedY)，再恢复overflow； - 遮罩上禁止
event.stopPropagation()——这会让 Escape 键、Tab 焦点、屏幕阅读器全部失灵；真要锁死关闭，应在浮层的close事件里event.preventDefault()并弹二次确认； - 移动端务必加
touch-action: manipulation到遮罩和浮层容器，否则可能“点两下才关”。
关闭按钮为什么点了没反应？
最常被忽略的是执行时机和作用域问题。结构看着没问题，但 JS 可能根本没执行到那个 onclick。
立即学习“前端免费学习笔记（深入）”；
- 内联
onclick="this.parentElement.style.display='none'"在 DOM 未加载完成时会报错（this.parentElement为null），建议改用事件委托或 DOMContentLoaded 后绑定； - 如果浮层是动态插入（比如用
innerHTML或appendChild），需确保关闭逻辑在插入后立即注册，不能依赖 HTML 内联； - 检查是否被其他 JS 覆盖了
display样式（比如 CSS 里写了!important，或用了visibility: hidden而非display）； - 避免用
remove()直接删节点——下次要重显就得重建 DOM，推荐统一用classList.add('hidden')+ CSS.hidden { display: none; }控制显隐。
inset 的 fixed、一行漏掉的 scrollY 保存、或一次错误的 stopPropagation，都可能让整个浮层逻辑在特定机型或交互路径下彻底失效。 
