position: fixed是唯一可靠、无需JS即可实现广告始终固定在页面顶部的方式，因其直接相对于视口定位、完全脱离文档流；而sticky依赖滚动容器、易受overflow/transform等影响失效，无法满足全屏顶部覆盖需求。
position: fixed 是唯一可靠、无需 JS 就能实现广告始终固定在页面顶部的方式。其他方案（如 sticky 或 JS 监听）要么不适用顶部全局固定，要么增加不必要的复杂度和兼容性风险。
为什么不用 position: sticky 做顶部广告？
position: sticky 只在父容器内“吸附”，不是真正脱离文档流；它依赖滚动容器的边界，且一旦父元素设置了 overflow: hidden、transform 或 will-change，就会直接失效。广告通常要覆盖全屏顶部，必须相对于视口定位——这只能靠 fixed。
position: fixed 必须配齐的四个 CSS 属性
只写 position: fixed 不够，漏掉任意一个都会出问题：
-
top: 0—— 缺失会导致广告卡在默认文档位置（比如 body 起始处），而不是视口顶部 -
left: 0（或right: 0+width: 100%）—— 否则宽度收缩为内容宽，无法横贯屏幕 -
width: 100%——fixed元素默认 width 是 auto，不设就只占内容宽度 -
z-index: 9999—— 广告必须压过轮播图、弹窗、导航栏等所有内容；用1000都可能被某些框架（如 Bootstrap 的 modal）覆盖
body 内容被遮挡？别只加 margin-top
广告固定后，body 第一屏内容会从视口顶部开始渲染，直接被广告盖住。解决方式不是给 body 加 margin-top（会把整个页面下推，造成空白滚条），而是：
- 给
body或主容器加padding-top，值等于广告高度（例如padding-top: 60px） - 如果广告高度不固定（比如响应式高度变化），改用
scroll-padding-top配合scroll-margin-top确保锚点链接跳转时内容不被遮挡 - 避免在广告外层套多余
div并设transform，这会让fixed失效（变成相对该 transform 容器定位）
最易忽略的是：iOS Safari 中，fixed 元素在键盘弹出或地址栏收起时可能错位；若广告含输入框或需强交互，得额外监听 resize 事件重设 top 值——但纯展示型顶部广告，fixed 四属性配齐就是最终解法。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
