用 position: fixed 实现底部广告条需预留 padding-bottom 空间防内容被遮挡或上推，单独置于 body 末尾、设足够 z-index、固定高度、viewport 适配、class 控制显隐，并排查 pointer-events 和 iframe 权限问题。
用 position: fixed 确实能固定在底部，但得防住“被遮挡”和“内容上推”
直接写 position: fixed; bottom: 0; width: 100%; 是对的起点，但实际页面中常出现两个问题：一是广告条盖住了原本在底部的按钮或版权栏，二是页面滚动时正文内容被它“顶上去”、最后一截看不见。这不是 CSS 写错了，而是没预留空间。
- 必须给
或主容器加padding-bottom（值 ≥ 广告条高度），否则内容会从广告条底下“钻出来” - 如果页面已有
footer，别让它和广告条重叠；建议把广告条单独放在最末尾，不嵌套进主内容流 -
z-index至少设为1000以上，避免被弹窗、导航栏等覆盖（尤其某些 UI 框架默认 z-index 很高）
移动端适配要额外处理 viewport 和缩放导致的错位
iOS Safari 和部分安卓浏览器在地址栏收起/展开时会触发 resize，fixed 元素可能短暂跳动甚至卡在半空。这不是 bug，是视口高度动态变化的结果。
- 在
中确保有正确viewport声明： - 避免用
%或vh设广告条高度，改用固定像素（如height: 56px），方便计算padding-bottom - 真机测试时手动滚动并收起地址栏，观察是否闪动；若严重，可加
will-change: transform提升合成层（但别滥用）
想让广告条只在特定页面显示？用 class 控制比 JS 插入更稳
服务端渲染或静态页里，硬塞一个全局 fixed 广告条容易污染 SEO 和无障碍体验。更可控的方式是：HTML 里留空位，靠 class 开关。
- 在
标签上动态加 class，比如has-ad-banner - CSS 写成：
body.has-ad-banner::after { content: ""; position: fixed; bottom: 0; left: 0; width: 100%; height: 56px; background: #000; z-index: 1001; } - 这样不用改 HTML 结构，也不用 JS 创建 DOM，减少 FOUC 和 SSR 不一致风险
别忽略点击穿透和 touch 事件失效问题
广告条下面的内容（比如悬浮按钮、地图控件）点不动？大概率是 pointer-events: none 被误加，或者广告条用了半透明背景但没设 pointer-events: auto（默认就是 auto，但某些重置样式会改掉）。
立即学习“前端免费学习笔记（深入）”；
- 检查广告条是否意外继承了
pointer-events: none—— 特别是用了第三方广告 SDK 时 - 如果广告条内有可点击区域（如关闭按钮），确保其
z-index高于广告条背景层 - 在 iOS 上，如果广告条含
iframe（常见于第三方广告），需确认该iframe的sandbox属性没禁掉allow-scripts，否则关闭逻辑可能不执行
padding-bottom 算少了几个像素，用户滚动到底部时刚好切掉一行文字——这种问题只有真机慢速滚动才能复现。 
