关键点：
相对定位是元素便宜正常位置，占用空间
绝对定位是相对于敷元素的四个方向定位,必须父元素有position属性，否则依据有position属性的祖先元素，都没有将依赖body元素，不占用空间，并且两个绝对定位的元素可以使用z-index来定义谁上谁下。
测试代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<link rel="stylesheet" href="./css/init.css" />
<style>
#test1 {
width: 300px;
height: 300px;
background-color: green;
}
#test2 {
width: 300px;
height: 300px;
background-color: pink;
position: relative;
}
#p1 {
width: 100px;
height: 100px;
background-color: blue;
position: relative;
bottom: 50px;
}
#p2 {
width: 100px;
height: 100px;
background-color: yellow;
}
#p3 {
width: 100px;
height: 100px;
background-color: black;
position: absolute;
top: 50px;
z-index: 1000;
}
#p4 {
width: 100px;
height: 100px;
background-color: gray;
position: absolute;
top: 10px;
z-index: 1001;
}
</style>
</head>
<body>
<div id="test1">
<p id="p1">我是p1,相对定位是元素便宜正常位置</p>
<p id="p2">我是p2,相对定位是元素便宜正常位置</p>
</div>
<div id="test2">
<p id="p3">我是p4,绝对定位是相对于敷元素的四个方向定位,必须父元素有position属性，否则依据有position属性的祖先元素，都没有将依赖body元素，并且不占用空间</p>
<p id="p4">我是p4,绝对定位是相对于敷元素的四个方向定位,必须父元素有position属性，否则依据有position属性的祖先元素，都没有将依赖body元素，并且不占用空间</p>
</div>
</body>
</html>