答案：使用 position: sticky 可实现广告元素在滚动时固定于视口特定位置的效果，需设置 bottom、top 等偏移量，结合父容器布局控制位置，适用于内容区域中阶段性固定的场景。
在CSS中，使用 position: sticky 可以轻松实现浮动广告效果，让广告元素在页面滚动时固定在视口的某个位置（比如右下角或左侧），直到离开其容器范围为止。
1. 基本原理：什么是 sticky 定位
sticky 是一种相对定位和固定定位的结合体。元素在正常文档流中表现为相对定位，当滚动到特定阈值时，变为固定定位。
要使用 sticky，必须指定一个偏移量（如 top、bottom、left 或 right），否则它不会生效。
2. 制作右下角浮动广告
以下是一个常见的右下角浮动广告示例：
立即学习“前端免费学习笔记（深入）”；
<div class="ad-container">
<div class="ad-box">
? 限时优惠！立即点击
</div>
</div>
说明：
- bottom: 20px 表示广告距离视口底部 20px 时开始“粘住”
- right: 20px 并不会对 sticky 生效起决定作用，因为 sticky 需要配合文档流中的位置。通常我们用 margin 或父容器布局 控制水平位置
- 若想让广告靠右，可设置父容器为相对定位，并将子元素通过 margin-left: auto 和 transform 或绝对定位思维布局 调整
3. 更稳定的右下角浮动方案（推荐）
由于 sticky 在复杂布局中可能受父级限制，更稳妥的方式是结合 flex 或绝对定位思想：
<div class="floating-ad-wrapper">
<div class="floating-ad">
? 浮动广告内容
</div>
</div>
优点：
- 兼容性好（现代浏览器均支持 sticky）
- 无需 JavaScript 即可实现“滚动到一定位置后固定”
- 性能优于 JS 监听 scroll 事件
4. 注意事项
使用 sticky 时需注意以下几点：
- 父元素不能有 overflow: hidden 或 overflow: auto，否则 sticky 会被截断
- sticky 的生效依赖于其在文档流中的原始位置，不能像 fixed 那样完全脱离布局
- 如果希望广告始终在视口角落，使用 position: fixed 更直接；sticky 更适合“进入某区域后才固定”的场景
基本上就这些。用好 position: sticky 能让你的浮动广告既轻量又高效，特别适合在文章页、列表页中插入自然不突兀的推广模块。
