绝对定位
position：absolute
设置为绝对定位的元素框将会从文档流中完全删除，并相对于其包含块（父元素）定位，包含块可能是文档中的另一个元素或者是初始包含块（body）元素。
绝对定位会脱离文档流，并且不占空间，普通文档流的元素的布局会认为绝对定位的元素不存在，所以绝对定位的元素可以覆盖在其他元素上，可以通过 z-index 来控制这些层的相应顺序。
<html>
<head>
<style type="text/css">
/* 由于 div1 没有已定位的祖先元素，所以此处以 body 为准 */
.div1{
width: 100px;
height: 100px;
background: blue;
position: absolute;
left: 50px;
}
/* 以父类的位置为标准，也就是 div1 */
.div2{
width: 50px;
height: 50px;
background: gray;
position: absolute;
left: 50px;
top: 80px;
}
</style>
</head>
<body>
<div class="div1">
div1
<div class="div2">
div2
</div>
</div>
</body>
效果图：
效果图中，div2 的父元素是 div1 ，以 div1 为基准。div2 距离 div1 的 top 80px，left 50px 。
绝对定位不会占用原来的空间，以下面的代码生产的效果图示例：
<html>
<head>
<style type="text/css">
.div1{
width: 100px;
height: 100px;
background: blue;
position: relative;
}
.div2{
width: 50px;
height: 50px;
background: gray;
position: absolute;
left: 20px;
}
#span1{
width: 100px;
height: 30px;
background: green;
display: inline-block;
}
</style>
</head>
<body>
<div class="div1">
<div class="div2"></div>
<span id="span1">
1
</span>
</div>
</body>
</html>
效果图：
图中，灰色 div2 的框覆盖住了绿色的 span1 ，不在占用原来的空间
相对定位
position:relative
设置为相对定位的元素框会偏移某个距离。元素仍然保持其未定位前的形状，它原本所占的空间仍保留。
相对位置的坐标参考系是以自己上一次的位置作为原点参考，其实也就是相对于自己的位置。
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
.div1{
width: 100px;
height: 100px;
background: blue;
left: 50px;
}
/* 自己的原本位置为标准，也就是左上角 */
.div2{
width: 50px;
height: 50px;
background: gray;
position: relative;
left: 100px;
}
</style>
</head>
<body>
<div class="div1">
<div class="div2"></div>
</div>
</body>
</html>
效果图：
相对定位是以它最初的位置为准，因为 div1（蓝色） 是父类，所以它最初位置在 div1 内，然后它距离左边 100px。
相对定位的元素，将会占用原来的空间，示例代码：
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.div1{
width: 100px;
height: 100px;
background: blue;
position: relative;
}
.div2{
width: 50px;
height: 50px;
background: gray;
position: relative;
left: 20px;
}
#span1{
width: 100px;
height: 30px;
background: green;
display: inline-block;
}
</style>
</head>
<body>
<div class="div1">
<div class="div2"> </div>
<span id="span1">
1
</span>
</div>
</body>
</html>
效果图：
如图说是，灰色的 div2 依旧占用着空间，所以 span1 只能放在下面
注意：
如果有文字的情况下，如果在有文字的范围内，那么长度或者高度要包括文字的长度和高度。在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框。
还有， 当 position:absolute 会改变 display 类型，也就是 inline-block 方式进行显示。
其他
- static（默认值）
- 该元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
- 元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。
- 表示没有定位
- fixed
- 元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。
- 固定定位的元素不会随浏览器窗口的滚动条滚动而变化，也不会受文档流动影响，而是始终位于浏览器窗口内视图的某个位置。
总结
相对定位是“相对于”元素在文档中的初始位置，而绝对定位是“相对于”最近的已定位祖先元素，如果不存在已定位的祖先元素，那么“相对于”最初的包含块（body）。
