最稳妥的选择是 position: sticky，但需确保广告在可滚动的父容器内；全局固定用 fixed；局部悬浮用 absolute；关键在于明确广告应跟随的对象。
用 position: sticky 是最稳妥的选择，前提是广告必须在可滚动的父容器内、且该容器是它的直接或合理祖先；若要全局固定（比如右下角始终可见），就得换 position: fixed。
sticky 定位只在滚动容器内生效
很多人写了 position: sticky 却没效果，根本原因是它不看整个页面，只认最近的「滚动祖先」。比如广告放在 <main></main> 里，而 <main></main> 没设 max-height 或 overflow-y: auto，那它就永远不会滚动——sticky 就永远不触发。
- 必须给广告的父容器设置可滚动条件，例如：
max-height: 600px; overflow-y: auto; -
top值不是相对于视口，而是相对于这个滚动容器的顶部边界（比如top: 20px表示离容器顶边 20px 后开始吸附） - 不能和
float、clear同时用，会失效 - IE 完全不支持，Edge 15+ 才开始支持，移动端 Safari 需加
-webkit-sticky
fixed 定位脱离文档流，需手动避让内容
position: fixed 简单粗暴：广告直接钉死在视口坐标上，但代价是它从文档流消失，后面的内容会“往上爬”，盖住或挤乱布局。
- 常见错误：只设
right: 20px; bottom: 20px;，却没给主体内容留出底部/侧边空白 - 正确做法是给主体区域加
padding-bottom（对应底部广告）或padding-right（对应右侧广告），值至少等于广告高度/宽度 + 间距 -
z-index必须显式设置，且大于页面其他元素，否则可能被遮挡；建议从1000起步 - 响应式场景下，小屏时
fixed广告容易遮挡操作区域，需用媒体查询隐藏或改用position: absolute+bottom: 0配合父容器position: relative
absolute 定位依赖父容器，适合局部悬浮
position: absolute 不像 fixed 那样锚定视口，而是以最近的「已定位祖先」（即 position 为 relative、absolute 或 fixed 的父级）为参考系。这在模块化组件中更可控。
- 父容器必须设
position: relative，否则会一直往上找，最终锚定到 - 配合
right和bottom可实现右下角悬浮，但不会随页面滚动“跟随”，只在父容器范围内固定 - 如果父容器高度动态变化（比如图文混排），
absolute广告可能被内容撑开、错位，不如fixed稳定 - 注意：不要在 flex 或 grid 容器里滥用
absolute，它会脱离布局轨道，导致对齐失效
真正难的不是写哪一行 CSS，而是想清楚这个广告到底该“跟谁走”：是跟整个页面（fixed）、跟某个滚动区块（sticky）、还是跟某一块内容区域（absolute）。选错定位方式，后面所有 margin、padding、z-index 都是在补救。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
