答案：使用 position: sticky 可实现广告元素在滚动时固定于视口特定位置的效果，需设置 bottom、top 等偏移量，结合父容器布局控制位置，适用于内容区域中阶段性固定的场景。
在CSS中，使用 position: sticky 可以轻松实现浮动广告效果，让广告元素在页面滚动时固定在视口的某个位置（比如右下角或左侧），直到离开其容器范围为止。
1. 基本原理：什么是 sticky 定位
sticky 是一种相对定位和固定定位的结合体。元素在正常文档流中表现为相对定位，当滚动到特定阈值时，变为固定定位。
要使用 sticky，必须指定一个偏移量（如 top、bottom、left 或 right），否则它不会生效。
2. 制作右下角浮动广告
以下是一个常见的右下角浮动广告示例：
立即学习“前端免费学习笔记（深入）”；
? 限时优惠！立即点击
说明：
易优cms汽车车辆租赁源码1.7.2
下载
由于疫情等原因大家都开始习惯了通过互联网上租车服务的信息多方面，且获取方式简便，不管是婚庆用车、旅游租车、还是短租等租车业务。越来越多租车企业都开始主动把租车业务推向给潜在需求客户，所以如何设计一个租车网站，以便在同行中脱颖而出就重要了，易优cms针对租车行业市场需求、目标客户、盈利模式等，进行策划、设计、制作，建设一个符合用户与搜索引擎需求的租车网站源码。 网站首页
- bottom: 20px 表示广告距离视口底部 20px 时开始“粘住”
- right: 20px 并不会对 sticky 生效起决定作用，因为 sticky 需要配合文档流中的位置。通常我们用 margin 或父容器布局 控制水平位置
- 若想让广告靠右，可设置父容器为相对定位，并将子元素通过 margin-left: auto 和 transform 或绝对定位思维布局 调整
3. 更稳定的右下角浮动方案（推荐）
由于 sticky 在复杂布局中可能受父级限制，更稳妥的方式是结合 flex 或绝对定位思想：
优点：
- 兼容性好（现代浏览器均支持 sticky）
- 无需 JavaScript 即可实现“滚动到一定位置后固定”
- 性能优于 JS 监听 scroll 事件
4. 注意事项
使用 sticky 时需注意以下几点：
- 父元素不能有 overflow: hidden 或 overflow: auto，否则 sticky 会被截断
- sticky 的生效依赖于其在文档流中的原始位置，不能像 fixed 那样完全脱离布局
- 如果希望广告始终在视口角落，使用 position: fixed 更直接；sticky 更适合“进入某区域后才固定”的场景
基本上就这些。用好 position: sticky 能让你的浮动广告既轻量又高效，特别适合在文章页、列表页中插入自然不突兀的推广模块。
