理解position：relative

前言：position有5个属性：static、absolute、relative、fixed和inherit。本篇博客主要介绍relative属性，因为似乎很多人对这个属性的理解很模糊，而且不清楚relative与absolute的区别。

《CSS权威指南》上对relative是这样解释的：元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。元素保持定位前的形状自然不用说，那么下面就针对以下两点来说明：

1）元素框偏移某个距离；

2）原本所占的空间仍保留。

元素框偏移某个距离

这句话的意思是：元素相对定位前的位置偏移某个距离。举个例子：

<div id="wrap">
    <div id="div1">我是参考div</div>
    <div id="div2">我是relative div</div>
</div>

#wrap{
    width:300px;
    height:300px;
    border:1px solid black;
}
#div1,#div2{
    width:100px;
    height:100px;
}
#div1{
    background: red;
}
#div2{
    background: yellow;
    position: relative;
    top:10px;
    left:20px;
}

以上代码的显示如左图，黄色div设置了relative，其相对定位前的位置偏移了某个距离。可以想象成右图，灰色部分是黄色div

定位前的位置，黄色div就是相对灰色部分进行定位（absolute是相对其position属性不为static的最近祖先元素定位）。

                             

原本所占的空间仍保留

这一点也是relative与absolute最大的区别：relative不脱离正常文档流，absolute脱离正常文档流。

<div id="wrap">
    <div id="div1">我是参考div</div>
    <div id="div2">我是relative div</div>
    <div id="div3">我是另一个参考div</div>
</div>

#div3{
    width:100px;
    height:100px;
    background: red;
}
/*其他样式不变*/

在黄色div后再放置一个参考div后发现，后一个参考div在放置的时候将黄色div原本的位置（即上右图的灰色部分）给空了出来。同样我们可以想象成右下图，灰色部分没有任何元素，但是在正常文档流中占据一定的位置，后面的元素均要空出此位置。

                            

再仔细想想relative的以上两个性质发现，其与absolute的定位方式其实有类似的部分：我们看到的部分（即黄色部分）不在正常文档流中，可根据出现顺序任意覆盖。但有两点不同：

1）相对的div不同：relative相对自己原本应该在的位置进行定位；absolute相对position不是static的最近祖先元素定位；

2）是否脱离正常文档流：relative表现上是不在正常文档流中，但在正常文档流中保留了原本所占的空间；absolute脱离正常文档流，正常文档流中就当没出出现过此元素