relative用于元素局部偏移，保留其在文档流中的位置，通过top、left等属性实现视觉位移，常作为absolute定位的参考基准。
在CSS布局中，absolute和relative是两个常用的定位属性，它们常配合使用来实现精确的元素控制。理解它们的使用场景，有助于构建更灵活、可维护的页面结构。
relative：局部偏移与定位参考
relative适用于需要微调元素位置，同时保留其在文档流中的原始空间的情况。
- 元素仍占据原来的位置，通过 top、left 等属性进行视觉上的偏移
例如，你想在一个按钮旁边显示一个悬浮的小红点作为消息提示，可以将按钮设为 relative，再用 absolute 定位红点，这样红点就能相对于按钮精准摆放。
absolute：脱离文档流的精准定位
absolute使元素完全脱离文档流，相对于最近的已定位祖先元素（relative、absolute 或 fixed）进行定位，若无则相对初始包含块（通常是视口）。
立即学习“前端免费学习笔记（深入）”；
- 适合做弹窗、下拉菜单、悬浮按钮、图层覆盖等需要“跳出”常规布局的内容
- 常用于实现“左上角贴标”、“右下角返回顶部按钮”这类固定位置元素
- 与 relative 搭配时，形成“父相子绝”布局模式，非常实用
比如一个用户头像右上角显示在线状态的小绿点，可以把父容器设为 relative，小点设为 absolute，并用 top: 0; right: 0; 精确定位到角落。
典型组合：“父相子绝”
这是前端开发中非常常见的模式：
- 父元素设置 position: relative（不一定要加偏移）
- 子元素设置 position: absolute，然后通过 top/left/right/bottom 相对于父元素定位
- 这样既能脱离正常流，又能精准控制位置，且不影响其他布局
这种结构广泛应用于轮播图、下拉导航、模态框、工具提示（tooltip）等组件中。
基本上就这些。掌握 relative 提供定位上下文的能力，以及 absolute 实现自由定位的特点，就能应对大多数需要精细控制位置的场景。
