css完全定位相对定位在CSS布局中，定位（position）一个非常重要的属性，它决定了元素在页面中的具体位置。其中，“完全定位”和“相对定位”是使用频率较高的两种定位方式。它们虽然都属于定位属性，但在实际应用中有着明显的区别。
一、
相对定位（position: relative） 是指元素相对于自己原来的位置进行偏移，不会脱离文档流。也就是说，即使设置了相对定位，元素仍然占据原本的空间，其他元素不会由于它的移动而发生改变。
完全定位（position: absolute） 是指元素相对于最近的已定位祖先元素（即position值不是static的元素）进行定位。如果没有这样的祖先元素，则会相对于浏览器窗口进行定位。完全定位的元素会脱离文档流，不再占据原本的空间，其他元素会“填补”它的位置。
两者的主要区别在于：
– 相对定位不脱离文档流，完全定位会脱离文档流。
– 完全定位需要有定位的父元素，否则以视口为基准。
– 相对定位常用于微调元素位置，完全定位常用于精确控制布局。
二、对比表格
| 属性 | 相对定位（relative） | 完全定位（absolute） |
| 定位基准 | 元素自身原来的位置 | 最近的已定位祖先元素或视口 |
| 是否脱离文档流 | 否 | 是 |
| 占据空间 | 保留原空间 | 不占据原空间 |
| 常见用途 | 微调元素位置 | 精确布局、弹窗、导航栏等 |
| 父元素要求 | 无要求 | 需要存在已定位的父元素 |
| 对其他元素影响 | 无影响 | 其他元素会“填补”其原空间 |
| 示例代码 | `position: relative;` | `position: absolute;` |
三、使用建议
– 相对定位适用于需要轻微调整位置但又不影响整体布局的情况，比如按钮的微调、图片的偏移等。
– 完全定位更适合复杂布局，如模态框、侧边栏、固定导航等场景，但需注意父级元素是否设置了定位。
合理使用这两种定位方式，可以更灵活地实现网页布局效果，提升用户体验和页面美观度。
