【relative和absolute的参考点】在CSS布局中，`position` 属性的两个常见值 `relative` 和 `absolute` 都用于控制元素的位置，但它们的参考点有所不同。理解这两个属性的参考点对于构建复杂的页面布局至关重要。
一、总结
- `position: relative;` 的参考点是元素自身原来的位置。
- `position: absolute;` 的参考点是最近的设置了定位（非 `static`）的祖先元素。
- 如果没有设置定位的祖先元素，则参考点是浏览器窗口（视口）。
- 使用 `absolute` 时，元素会脱离文档流，不再影响其他元素的布局。
二、对比表格
| 特性 | `position: relative;` | `position: absolute;` |
| 参考点 | 元素自身原来的位置 | 最近的设置了定位（非 `static`）的祖先元素 |
| 是否脱离文档流 | 否 | 是 |
| 是否影响其他元素 | 否 | 是 |
| 常用场景 | 需要相对于自己位置进行微调时 | 需要精确控制位置，如弹窗、提示框等 |
| 默认参考点 | 自身位置（原点） | 视口或最近的定位祖先元素 |
| 是否需要父级定位 | 不需要 | 需要父级设置 `position: relative;` 等 |
三、实际应用示例
示例1：`relative` 的使用
```html
```
在这个例子中，内部的红色块相对于父容器的原始位置偏移了 20px 和 30px。
示例2：`absolute` 的使用
```html
```
这里的蓝色块也是相对于父容器的原始位置偏移，但由于使用了 `absolute`，它不再占据空间，可能会影响其他元素布局。
四、小结
`relative` 和 `absolute` 虽然都用于定位，但它们的参考点不同，适用场景也有所区别。合理使用这两个属性，可以更灵活地控制页面布局，提升用户体验。
以上就是【relative和absolute的参考点】相关内容，希望对您有所帮助。
