相對定位是按照元素自身所在的位置，使用邊偏移屬性重新定義元素的顯示位置，使用相對定位的元素依然是文檔中的元素，元素的顯示位置和
元素所在文檔中其他元素互相關聯。
在确定相對定位元素位置的時候，首先要确定元素的原始位置，即元素在文檔中的位置，然後根據偏移屬性中定義的偏移值，确定元素的最終位置。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<style>
.div1 {
background: #333333;
width: 200px;
height: 100px;
}
.relative {
position: relative;
top: 50px;
left: 100px;
width: 400px;
height: 100px;
background: #666666;
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="relative">這是相對定位到元素</div>
</body>
</html> 
從上圖可以看出，使用相對定位的元素按照自身所在的位置進行偏移。
在使用相對定位到時候，相對定位元素保留原來所占有的空間，同時自身按照邊偏移屬性中定義的屬性值進行偏移（有可能覆寫其他元素），
與相對定位元素相鄰的元素會将相對定位元素進行排列。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<style>
.div1 {
background: #333333;
width: 200px;
height: 100px;
}
.relative {
position: relative;
top: 50px;
left: 100px;
width: 400px;
height: 100px;
background: #666666;
}
.div2 {
background: #999999;
width: 200px;
height: 100px;
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="relative">這是相對定位到元素</div>
<div class="div2"></div>
</body>
</html> 
從上圖看出，與相對定位元素相鄰的元素的顯示方式，會保留相對元素原來占有的空間，使用相對定義的元素，由于其顯示級别高于
普通元素，是以相對定位元素覆寫了普通頁面元素。