在CSS中，我们可以使用“position:relative;”来实现相对定位。所谓的相对定位，指的是该元素的位置是相对于它的原始位置计算而来的。

语法：

position: relative;
top: 像素值;
bottom: 像素值;
left: 像素值;
right: 像素值;

说明：

position:relative;也是结合top、bottom、left和right这4个属性一起使用的，其中，position:relative;使得元素成为相对定位元素，接着使用top、bottom、left和right这4个属性来设置元素相对原始的位置。

top、bottom、left和right这4个属性不一定全部都用到，一般只会用到其中两个。这4个值的参考对象是该元素的原始位置。

注意，在默认情况下，固定定位元素的位置是相对浏览器而言，而相对定位元素的位置是相对于原始位置而言！

举例：

在线测试
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        #father
        {
            margin-top:30px;
            margin-left:30px;
            border:1px solid silver;
            background-color: lightskyblue;
        }
        #father div
        {
            width:100px;
            height:60px;
            margin:10px;
            background-color:hotpink;
            color:white;
            border:1px solid white;
        }
        #son2
        {
            /*这里设置son2的定位方式*/
        }
    </style>
</head>
<body>
    <div id="father">
        <div id="son1">第1个无定位的div元素</div>
        <div id="son2">相对定位的div元素</div>
        <div id="son3">第2个无定位的div元素</div>
    </div>
</body>
</html>

浏览器预览效果如下图所示。

我们为第2个div元素加入相对定位，CSS代码如下：

#son2
{
    position:relative;
    top:20px;
    left:40px;
}

此时浏览器中效果如下图所示。

分析：

从这个例子可以看出，相对定位元素的top和left是相对于该元素原始位置而言的，这一点跟固定定位是不一样的。

在相对定位中，top、right、bottom、left这4个属性，我们也是只需要其中两个属性就可以确定一个元素的相对位置。