相对定位：
与static定位相同，不会脱离文档流，也不会改变盒类型，行内元素不会变为块级元素。相对定位根据原先的位置进行偏移，也就是自身的位置，并且原先占用的空间会继续保留。
下面对相对定位的例子，即便设置了span的宽高但不会生效。
绝对定位：
会脱离文档流，并会将元素变成块级元素。元素被设定为绝对定位后，其原先占用的空间会被删除，他的包含快就是离他最近的position属性不为static的祖先元素的内容区域。
下面对绝对定位的例子，div元素变成了span的包含块，并且由于span元素的盒类型已经改变（变为块级元素），所以宽高是生效的。而且span元素后的文本会占据他原来的空间。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>无标题文档</title>
<style>
.div1{
border:1px solid red;
width:500px;
height:100px;}
.div1 span{
position:relative;
top:10px;
left:20px;
width:70px;
height:50px;
}
.div2{
position:relative;
border:1px solid green;
width:500px;
height:100px;}
.div2 span{
position:absolute;
height:50px;
width:70px;
top:10px;
left:20px;
}
span{
background:#933;
}
</style>
</head>
<body>
<div class="div1">
改变相对定位位置，改变
<span>相对位置定位</span>
，改变相对定位的位置
</div>
<hr/>
<div class="div2" >
改变绝对位置，改变
<span >绝对定位的位置</span>
，改变绝对定位的位置
</div>
</div>
</body>
</html>
效果图：
固定位置：
除了IE6,7不支持，其余都支持，类似于绝对定位，但又不同，它的包含块是根据当前视口决定的。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>position-fixed</title>
<style>
.div3{
border:1px solid skyblue;
width:500px;
height:100px;}
.div3 span{
position:fixed;
height:50px;
width:70px;
top:10px;
left:20px;
background:#CCC;
}
</style>
</head>
<body>
<div class="div3">
改变固定位置，改变
<span>固定定位的位置</span>
，改变固定定位的位
</body>
</html>
效果图：
span相对于视口top：10px；left：20px；它将固定在这个位置，几十页面滚动也不会消失。
固定定位通常会偏移到父元素外面，相当于内容溢出。即便给父元素设置超出部分隐藏（overflow：hidden），固定定位的元素也不会被裁减，但换成绝对定位，就会被裁剪。
注意：给固定位置和绝对定位的元素设置浮动时，元素浮动是不会生效的。