第12话：安营 - CSS 漫画大冒险

旷野迷路

🦊

Little Fox (小狐狸):
我要飞到右上角去！position: absolute; right: 0; top: 0;
咻——！
哎？我怎么飞到世界（浏览器窗口）的最尽头去了？我不是想离开这个羊圈啊！

(这是一个普通的羊圈)

小狐狸在这里！
(相对于 Body)

安营扎寨的智慧

🧑‍🦱

Young David (少年大卫):
小狐狸，你忘了设置大本营（参考点）！
要想在羊圈内部安营，羊圈必须也是“被标记的” (relative/absolute/fixed)。
来学习四大安营法：

Static

默认状态。顺服地排队。Top/Left 对我无效。

Rel

我出去了，但营地还留着我的位置。相对于自己原来的位置移动。

Abs

脱离队伍，不占位。相对于最近的长官 (非 Static 父级) 定位。

Fixed

看到右下角那个了吗？不管你怎么滚动世界，它都坚定不移地守望在那里！(相对于窗口)

跟随者 (Sticky)

🧑‍🦱

Young David (少年大卫):
还有一个新战术：Sticky (粘性定位)。
它平时像探子 (Relative)，但当你滚动超过它时，它就变成了守望塔 (Fixed)！

向下滚动试试...

继续滚...

我是 Sticky!

我在 Sticky 下面...

继续滚...

⚔️ 操练场 (Training Ground)

任务： 选择正确的战术。

问题：如果你想把一个“回到顶部”的按钮永远固定在屏幕右下角，不管怎么滚动页面它都在那里。你应该用哪个 Position？