即可以理解为：移动后是移动前的负的位置。
比如上例中，移动后是移动前负的bottom:-20px;即移动后是移动前bottom:20px;也就是说，移动后是移动前的向下20px；
又如：left:50px;移动后是移动前左边的-50px;那么也就是说移动后是移动前的右边的50px。
即：移动后对于移动前：如果值为负数，则直接换成整数；如果值为整数，则直接改变相对方向。
弄清楚了relative是如何移动的，下面我们看一看移动之后是否会产生其他的影响。
html代码如下：
<h2>这是一个没有定位的标题</h2><h2 class="pos_top">这个标题是根据其正常位置向上移动</h2>
<p><b>注意:</b> 即使相对定位元素的内容是移动,预留空间的元素仍保存在正常流动。</p>
css代码如下：
h2.pos_top{position:relative;top:-35px;}效果图如下：
根据之前的说法，top:-35px；值是负数，则直接换成正数，即移动后相对与移动前向上偏移了35px；我们发现于上，移动后和上面的元素发生了重叠；于下，即使相对元素的内容移动了，但是预留空间的元素仍然保存在正常流动，也就是说相对移动之后，不会对下面的其他元素造成影响。
第四部分：absolute定位
绝对定位的元素相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>。
下面举几个例子：
例子1：
<title>绝对定位</title><style> body{background:green;}
.parent{ width: 500px;height: 500px;background: #ccc;}
.son{ width: 300px;height: 300px;background: #aaa;}
span{position: absolute; right: 30px; background: #888;}
</style>
<div class="parent">
<div class="son">
<span>什么？</span>
</div>
</div>
效果如下：
即我只在span中设置了position:absolute；而在其父元素中都没有，于是它的位置是相对于html的。
例2:
.son{position: relative; width: 100px;height: 100px;background: #aaa; }相较于上一个例子，我只修改了class为son的元素的css，设置为position：relative；效果图如下：
于是，我们发现现在span的位置是相对于设有position属性的class为son的父元素的。
例3：
.parent{position: absolute; width: 300px;height: 300px;background: #ccc;}
