相对定位和绝对定位，不改变元素的大小形状，只改变元素的位置。
相对定位和绝对定位是通过position属性来控制的，position属性的值为下面几种：
| 值 | 描述 |
|---|---|
| absolute | 使元素绝对定位，相对于static定位以外的最近的一个祖先元素进行定位。 元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。 |
| relative | 使元素相对定位，相对于自己的正常位置进行定位。 |
| fixed | 使元素绝对定位，相对于浏览器窗口进行定位。 元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。 |
| static | 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。 |
| inherit | 规定应该从父元素继承 position 属性的值。 |
注：对于html的标准流(文档流)和浏览器怎么渲染各个DOM元素等底层知识，我不怎么清楚，下面的理解方式不一定正确，仅供参考。
相对定位
相对定位的参考点，是它自己定位(移动)之前的位置，不是相对于父节点，也不是相对于平级节点。
分析
我是分为两步来理解相对定位的，如下：
1、先不考虑position定位，按标准流将各个元素显示出来。
2、以元素自身的位置作为参考点，进行左右、上下移动进行定位。
如下图，最外面的虚线大框代表body，里面有3个div，不考虑定位时显示如下：
然后在上图的基础上考虑相对定位，如让div2向下20px，向右移动30px，这里div2移动的参考对象就是它自己没移动前的位置，如B点是相对于A点，类似于数学里的平面坐标系。如下图：
注：div2相对定位移动不影响div1和div3，由于div2并没有脱离标准流(文档流)，所以div2原来的位置还保留着，div3并不会向上移动占用div2原来的位置，而且，相对定位移动之后，有可能会导致元素重叠，下面的验证例子会说明这一点。
验证
我们同样用3个div来说明，首先不考虑position相对定位，正常显示，代码如下：
<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><title>测试相对定位和绝对定位</title><style>div{width:50px;height:50px;}.d1{background-color: blue;}.d2{background-color: aqua;}.d3{background-color: brown;}</style></head><body><divclass="d1">div1</div><divclass="d2">div2</div><divclass="d3">div3</div></body></html>正常情况下，3个div依次块状显示，运行效果如下：
现在我们给div2加上相对定位，增加样式position: relative;top: 20px;left: 30px;
<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><title>测试相对定位和绝对定位</title><style>div{width:50px;height:50px;}.d1{background-color: blue;}.d2{background-color: aqua;}.d3{background-color: brown;}</style></head><body><divclass="d1">div1</div><divclass="d2"style="position: relative;top: 20px;left: 30px;">div2</div><divclass="d3">div3</div></body></html>效果图如下：
通过比较两幅效果图，总结如下：
- 相对定位的元素的参考对象是自己，即自己原来的所在位置(自己原来左上角作为坐标系的原点)。
- 相对定位移动后，之前的位置依旧保留，其他元素并不会占用。
- 相对定位后，有可能导致元素重叠。
绝对定位
描述
绝对定位的参考对象就不是自己了，而是最近的已设置了position的祖先元素，并且position不是static，而是absolute或者relative。首先看它的父元素是否设置了position为absolute或者relative，如果有就按父元素的左上角作为参考点，如果没有则再找祖父元素、曾祖父元素、高祖父元素，如果都没有就以页面文档的初始位置作为参考点。
绝对定位的元素是脱离标准流(文档流)的，即直接在标准流中删除，所以元素原来的位置会被占用。
由于绝对定位元素脱离的标准流，所以元素可以覆盖标准流中元素，也可以通过z-index设置层叠次序，z-index值越大越靠上层。如果把页面比作高楼，正常的元素都是在1层，绝对定位的元素在2层及以上，z-index越大所在层月高，越难被其他元素覆盖。
测试示例
1、没有绝对定位的情况，代码如下：
<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><title>测试相对定位和绝对定位</title><style>.d1,.d2,.d3{width:50px;height:50px;}.p1{width:450px;height:450px;border:1px solid red;}.p2{width:380px;height:380px;border:1px solid blue;}.p3{width:300px;height:300px;border:1px solid black;}.d1{background-color: blue;}.d2{background-color: aqua;}.d3{background-color: brown;}</style></head><body><divclass="p1">曾祖父<br><br><divclass="p2">祖父<br><br><divclass="p3">父<br><br><divclass="d1">div1</div><divclass="d2">div2</div><divclass="d3">div3</div></div></div></div></body></html>运行效果：
通过上面可以看出，在没有使用绝对定位时，元素都是按标准流(文档流)正常显示的。
2、让div2绝对定位，它的所有祖先元素都没有设置position为absolute或者relative，代码如下：
<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><title>测试相对定位和绝对定位</title><style>.d1,.d2,.d3{width:50px;height:50px;}.p1{width:450px;height:450px;border:1px solid red;}.p2{width:380px;height:380px;border:1px solid blue;}.p3{width:300px;height:300px;border:1px solid black;}.d1{background-color: blue;}.d2{background-color: aqua;}.d3{background-color: brown;}</style></head><body><divclass="p1"style="margin-top: 25px;margin-left: 10px">曾祖父<br><br><divclass="p2">祖父<br><br><divclass="p3">父<br><br><divclass="d1">div1</div><divclass="d2"style="position: absolute;top: 20px;left: 30px">div2</div><divclass="d3">div3</div></div></div></div></body></html>运行效果：
可以看出，div2所有祖先元素都没设置position时，div2是把页面文档的初始位置作为原点参考对象进行移动的，不是根据父元素、祖父元素，也不是根据曾祖父元素。
3、祖先元素中有设置position为absolute或者relative时，则把最近的一个作为参考对象。
示例1：祖父元素设置了position为absolute，父元素设置position为static
代码如下：
<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><title>测试相对定位和绝对定位</title><style>.d1,.d2,.d3{width:50px;height:50px;}.p1{width:450px;height:450px;border:1px solid red;}.p2{width:380px;height:380px;border:1px solid blue;}.p3{width:300px;height:300px;border:1px solid black;}.d1{background-color: blue;}.d2{background-color: aqua;}.d3{background-color: brown;}</style></head><body><divclass="p1">曾祖父<br><br><divclass="p2"style="position: absolute;top: 60px;left: 60px">祖父<br><br><divclass="p3"style="position: static;top: 20px;left: 30px">父<br><br><divclass="d1">div1</div><divclass="d2"style="position: absolute;top: 20px;left: 30px">div2</div><divclass="d3">div3</div></div></div></div></body></html>运行效果如下：
通过上图可以看出，div2的父元素设置了position: static,祖父元素设置了position: absolute,div2是以祖父元素为参考的，即相对于祖父元素进行移动定位。
示例2：div2曾祖父设置了position: absolute，祖父元素设置了position: relative，父元素设置了position: static
<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><title>测试相对定位和绝对定位</title><style>.d1,.d2,.d3{width:50px;height:50px;}.p1{width:450px;height:450px;border:1px solid red;}.p2{width:380px;height:380px;border:1px solid blue;}.p3{width:300px;height:300px;border:1px solid black;}.d1{background-color: blue;}.d2{background-color: aqua;}.d3{background-color: brown;}</style></head><body><divclass="p1"style="position: absolute;top: 40px;left: 100px">曾祖父<br><br><divclass="p2"style="position: relative;top: 20px;left: 60px">祖父<br><br><divclass="p3"style="position: static;top: 20px;left: 30px">父<br><br><divclass="d1">div1</div><divclass="d2"style="position: absolute;top: 20px;left: 30px">div2</div><divclass="d3">div3</div></div></div></div></body></html>运行效果如下：
可以看出，div2多个祖先元素设置了position: absolute或者position: relative，是以最近的一个祖先元素为准。
综合上面的示例，总结如下：
- 绝对定位元素脱离正常流(文档流)，所以元素原来的位置会被其他元素占用。
- 因为绝对定位元素脱离了正常流，和相对元素一样也会有覆盖其他元素的情况。
- 绝对定位元素是相对于祖先元素，和相对定位不同，相对定位是相对于元素自己原来的位置。
- 绝对定位元素的祖先元素是设置的
position: static，该祖先元素并不作为参考物。 - 绝对定位元素的祖先元素有多个都设置了
position: absolute或position: relative,那么是以最近的一个祖先元素作为参考物，即相对于最近的那一个祖先元素进行移动定位。