relative 相对于自身原位置偏移但保留占位；2. absolute 脱离文档流，相对于最近非 static 祖先定位；3. fixed 相对于视口固定，不随滚动移动。
在HTML和CSS中，position 属性用于控制元素的定位方式。常见的取值有 relative、absolute 和 fixed，它们的行为和使用场景各不相同。
position: relative（相对定位）
元素相对于其正常文档流中的位置进行偏移。设置 top、right、bottom、left 会使其相对于原本的位置移动，但原来占据的空间仍然保留。
- 不脱离文档流
- 偏移后原位置仍被占用
- 常用于为绝对定位元素设置参考父容器
设置 top: 10px; left: 20px; 后，元素从原位置向下移动10px，向右移动20px，但原来的位置空着。
position: absolute（绝对定位）
元素脱离文档流，相对于最近的已定位（非 static）的祖先元素进行定位。如果没有这样的祖先，则相对于初始包含块（通常是视口）。
- 脱离文档流，不占空间
- 定位基准是最近的 position 不为 static 的父级
- 常用于弹窗、下拉菜单、图层叠加等场景
在一个 position: relative 的 div 内部设置 position: absolute; top: 0; left: 0; 可使子元素定位到该 div 的左上角。
position: fixed（固定定位）
元素脱离文档流，相对于浏览器视口进行定位，不会随页面滚动而移动。
立即学习“前端免费学习笔记（深入）”；
- 常用于导航栏、返回顶部按钮等需要始终可见的组件
- 定位基准是视口（viewport），不是父元素
- 即使页面滚动，元素位置保持不变
设置 position: fixed; bottom: 10px; right: 10px; 的元素会一直显示在屏幕右下角。
基本上就这些。理解它们的关键在于定位参照物不同：relative 是自身原位，absolute 是最近定位祖先，fixed 是浏览器窗口。
