在网页设计中，元素的定位和布局是至关重要的。随着互联网技术的不断发展，各种布局手段层出不穷。在CSS中，我们可以利用position属性来定义元素的定位方式。position属性有四个值可供选择，即static、relative、absolute和fixed。其中，相对定位（position: relative）是常用的一种布局方式。本文将介绍相对定位的用法和实现方法，帮助读者掌握CSS中的相对定位技巧，轻松实现元素相对定位。

一、什么是相对定位？

相对定位是指将元素相对于它原来所在的位置进行定位，而不是相对于文档流中的其他元素位置进行定位。它是一种增量定位方式，就是说，元素的位置参数（top、right、bottom和left）取决于元素自身原来所在的位置。

二、如何使用相对定位？

1. 设置定位方式

首先，要使用相对定位，需要先将定位方式设置为relative。例如：

```

position: relative;

```

2. 移动位置

接着，可以通过设置位置参数来改变元素的位置。位置参数有top、right、bottom和left四个值，分别代表距离父元素上边界、右边界、下边界和左边界的距离。例如：

```

/* 向下移动20像素 */

top: 20px;

/* 向右移动30像素 */

left: 30px;

```

需要注意的是，相对定位会改变元素的位置，但是不会改变文档流中的位置。这就意味着，如果一个元素被相对定位后，它虽然脱离了文档流，但是其他元素还是照常排列，不会发生任何位移。因此，相对定位适用于需要微调元素位置的场合，例如增加留白、调整层叠顺序等。

三、相对定位的实例

下面我们通过一个实例来演示相对定位的用法。假设有一个页面上有两个元素，它们的html代码为：

```