元素设置了relative后，如果没有进行任何的“T-R-B-L”设置，元素不会进行任何位置改变。
上面三点第一点和第三点来说都是比较好理解，那么现在针对第二点，我们来看一个实例的操作：
在上面的基础上，我们对“div-1”进行向下移动20px；向左移动40px:
CSS Code复制内容到剪贴板
#div-1 {
position:relative;
top:20px;
left:-40px;
}
我们来看看效果：
从效果图可以再次印证上面说的第二点。元素“div-1”向下移动了20px，向左移动了40px，本身位置变化了，而元素最初所占的物理空间依然还是存在，另外一点元素相对定位后并没有影响其他相邻的元素。
第三步：绝对定位position:absolute
absolute是position中的第三个属性值，如果你给元素指定了absolute，整个元素就会漂出文档流，而且元素自身的物理空间也同时消失了。不像“relative”还具有原先的物理空间。
我们来看一个实例,在div-1a元素上进行绝对定位：
CSS Code复制内容到剪贴板
#div-1a {
position:absolute;
top:0;
rightright:0;
width:200px;
}
此时元素“div-1a”不在当初的文档流中，而且其此时定位也是相对于html来进行定位，那么我们有时候并不是需要这样的效果，哪果我们元素div-1a还想在div-1是进行绝对定位，那要怎么办呢？此时就要发挥前面第二步的“relative”作用了。
第四步：relative和absolute的结合
第二步中大家知道元素相对定位“relative”是相对于元素自身定位，而在第三步中大家知道元素绝对定位“absolute”是相对于html。但这种说法只有满足这样的条件才是正常的：“绝对定位元素的任何祖先元素没有进行任何的“relative”或者“absolute”设置，那么绝对定位的元素的参考物就是html”，这样一来，“relative”和“absolute”的结合就能起到很大的作用。
我们接下来看一个截图：
上图做为一个实例来说明“relative”和“absolute”的关系，首先上图中共有三个div放在body内，而且他们三个div的关系是“div-1>div-2>div-3”,而且在div-3有这么一个绝对定位：
