【css绝对定位相对定位】在CSS布局中，定位（position）是一个非常重要的属性，它决定了元素在页面中的位置。常见的定位方式有静态定位（static）、相对定位（relative）、绝对定位（absolute）和固定定位（fixed）。其中，相对定位和绝对定位是使用频率最高的两种方式，它们之间有着密切的联系，但也存在明显的区别。
为了更清晰地理解两者的不同，以下是对“CSS绝对定位与相对定位”的总结，并通过表格形式进行对比说明。
一、
相对定位（relative） 是相对于元素本身原来的位置进行偏移。设置 `position: relative;` 后，该元素仍然占据原本的空间，不会影响其他元素的布局。当子元素使用绝对定位时，其定位基准会以最近的设置了非静态定位的祖先元素为参考点。
绝对定位（absolute） 是相对于最近的设置了非静态定位（如 relative、absolute、fixed 或 sticky）的祖先元素进行定位。如果没有任何祖先元素设置非静态定位，则会以浏览器窗口为基准进行定位。
两者的核心区别在于：相对定位是基于自身原始位置，而绝对定位是基于最近的定位祖先元素。合理使用这两种定位方式，可以实现复杂的页面布局效果。
二、表格对比
| 属性 | 相对定位（relative） | 绝对定位（absolute） |
| 定位基准 | 元素自身原来的位置 | 最近的设置了非静态定位的祖先元素 |
| 是否脱离文档流 | 否，仍占据原来空间 | 是，脱离文档流 |
| 布局影响 | 不影响其他元素布局 | 可能影响其他元素布局 |
| 使用场景 | 需要微调位置或作为绝对定位的容器 | 需要精确控制位置或与父级联动 |
| 示例代码 | `position: relative;` | `position: absolute;` |
| 典型用途 | 图片轮播、弹窗定位、局部调整 | 弹出层、导航菜单、模态框等 |
三、使用建议
- 相对定位适用于需要轻微移动元素但又不希望打乱整体布局的情况。
- 绝对定位适合需要精确控制位置的场景，但需注意其依赖于父级定位。
- 在使用绝对定位前，最好确认父级是否设置了合适的定位方式，否则可能定位到视口边缘。
通过合理运用相对定位与绝对定位，可以灵活构建出各种复杂的网页布局，提升用户体验和页面美观度。