答案：relative元素相对于自身原位置偏移但不脱离文档流；absolute元素脱离文档流并相对于最近已定位祖先定位；fixed元素脱离文档流且相对于视口固定不动，常用于导航栏等始终可见的组件。
在CSS布局中，定位（position）是控制元素位置的核心机制之一。通过设置不同的position属性值，可以精确控制元素的显示位置和层级关系。其中，relative、absolute、fixed 是最常用的三种定位方式，理解它们的特性和使用场景对实现复杂页面布局至关重要。
relative：相对定位
relative 定位的元素相对于其正常文档流中的原始位置进行偏移。设置 top、right、bottom、left 值后，元素会从原来的位置移动，但不会脱离文档流，也不会影响其他元素的布局。
关键点：
- 元素仍占据原始空间，其他元素按它未移动时布局
- 常用于微调元素位置，或作为 absolute 定位的参考父容器
- 设置 position: relative 后，通过 top/left 等属性实现偏移
.box { position: relative; top: 10px; left: 20px; } 元素向下向右移动10px和20px，但原位置仍被占用。
absolute：绝对定位
absolute 定位的元素脱离文档流，不占据空间，其位置相对于最近的已定位祖先元素（即 position 为 relative、absolute 或 fixed 的祖先），若无则相对于初始包含块（通常是视口）。
立即学习“前端免费学习笔记（深入）”；
使用要点：
- 完全脱离文档流，后续元素会“上移”填补空隙
- 常用于弹窗、下拉菜单、图层叠加等需要精确定位的场景
- 父元素通常设为 position: relative 来建立定位上下文
position: absolute; top: 100%; left: 0; 相对于导航栏下方展开。
fixed：固定定位
fixed 定位的元素也脱离文档流，其位置相对于浏览器视口固定，不随页面滚动而移动。常用于头部导航、侧边栏、返回顶部按钮等需要始终可见的组件。
特点包括：
- 始终停留在屏幕同一位置，即使页面滚动
- 适用于全局功能元素，如悬浮按钮、广告条
- 定位基准是视口，不受父元素影响
.header { position: fixed; top: 0; width: 100%; } 可实现顶部通栏固定效果。
基本上就这些。掌握 relative、absolute 和 fixed 的区别与配合使用，能有效解决大多数布局需求。关键是理解它们的参照物和是否脱离文档流。实际开发中，三者常结合 z-index 控制层级，构建清晰的视觉结构。不复杂但容易忽略细节，多实践就能熟练运用。
