CSS定位属性是组成CSS布局基础的重要一环。在定位元素时，我们通常使用相对定位和绝对定位两种方法。下面我们来详细介绍一下它们的区别。

.relative {
  position: relative;
}
.absolute {
  position: absolute;
}
.parent {
  position: relative;
  height: 300px;
}

相对定位可以让元素相对于其原始位置进行移动，但是它仍然占据原始位置的空间。比如，当一个元素使用相对定位时，向左移动10像素，则它原来的位置会留下一个10像素宽的空白。相对定位的元素可以使用top、right、bottom、left四种属性来调整它的位置，从而产生偏移效果。

.relative .child {
  position: relative;
  left: 10px;
  top: 20px;
}

绝对定位会将元素从文档流中拖出，不占据原始位置空间，而是相对于最近的“已定位”的祖先元素进行定位。如果没有已定位的祖先元素，则相对于文档的body元素进行定位。绝对定位的元素可以使用top、right、bottom、left四种属性来调整它的位置，从而在屏幕上产生偏移效果。

.parent {
  position: relative;
  height: 300px;
}
.absolute .child {
  position: absolute;
  left: 0;
  top: 0;
}

综上所述，相对定位和绝对定位都可以用来改变元素在屏幕上的位置，但相对定位仍占据原始位置的空间，而绝对定位不占据该位置空间。为了使定位生效，需要使用position属性并设置一个值。实际使用时，可以根据不同的布局需求，选择相应的定位方式。