采用相對定位的元素，其位置是相對於它的原始位置計算而來的。相對定位是通過將元素從原來的位置向上、向下、向左或者向右移動來定位的。采用相對定位的元素會獲得相應的空間。
語法：
position:relative; top:像素值; bottom:像素值; left:像素值; right:像素值;
說明：
“position:relative;”是結合top、bottom、left和right這4個屬性一起使用的，其中“position:relative;”使得元素成為相對定位元素，接著使用top、bottom、left和right這4個屬性來設置元素相對原始位置。相對定位的容器浮上來後，其所占的位置仍然留有空位，後面的無定位元素仍然不會“擠上來”。
在這裡要非常清楚這一點：默認情況下，CSS相對定位元素的位置是相對於原始位置而言，而CSS固定定位元素的位置是相對浏覽器而言！
舉例：
在線測試
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS相對定位</title>
<style type="text/css">
#father
{
margin-top:30px;
margin-left:30px;
border:1px solid silver;
background-color: #B7F1FF;
}
#father div
{
width:100px;
height:60px;
margin:10px;
border:1px solid silver;
background-color:#FA16C9;
}
#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元素 改變為相對定位元素：
#son2
{
/*這裡設置son2的定位方式*/
position:relative;
top:20px;
left:40px;
}
在浏覽器預覽效果如下：
分析：
在這裡，可以清楚地看到，相對定位的元素的top和left屬性是相對於該元素原始位置而言的，這一點跟固定定位的元素完全不一樣的。