1.文檔流

簡單說就是元素按照其在 HTML 中的位置順序決定排布的過程。HTML的布局機制就是用文檔流模型的，即塊元素（block）獨占一行，內聯元素（inline）不獨占一行。

一般使用margin是用來隔開元素與元素的間距；padding是用來隔開元素與內容的間隔。margin用于布局分開元素使元素與元素互不相干；padding用于元素與內容之間的間隔，讓內容（文字）與（包裹）元素之間有一段“距離”。只要不是float和絕對定位方式布局的，都在文檔流里面。

2.position屬性介紹

static，默認值。位置設置為static的元素，它始終會處于文檔流給予的位置。
inherit，規定應該從父元素繼承 position屬性的值。但是任何的版本的 Internet Explorer （包括 IE8）都不支持屬性值 “inherit”。
fixed，生成絕對定位的元素。默認情況下，可定位于相對于瀏覽器窗口的指定坐標。
元素的位置通過 “left”, “top”, “right” 以及 “bottom” 屬性進行規定。不論窗口滾動與否，元素都會留在那個位置。但當祖先元素具有transform屬性且不為none時，就會相對于祖先元素指定坐標，而不是瀏覽器窗口。
absolute，生成絕對定位的元素，相對于距該元素最近的已定位的祖先元素進行定位。
此元素的位置可通過 “left”、”top”、”right” 以及 “bottom” 屬性來規定。
relative，生成相對定位的元素，相對于該元素在文檔中的初始位置進行定位。
通過 “left”、”top”、”right” 以及 “bottom” 屬性來設置此元素相對于自身位置的偏移。

3.相對定位

relative生成相對定位的元素，相對于其正常位置進行定位。

相對定位完成的過程如下：

按默認方式（static）生成一個元素(并且元素像層一樣浮動了起來)。相對于以前的位置移動，移動的方向和幅度由 left、right、top、bottom 屬性確定，偏移前的位置保留不動。

<style type="text/css">
#box1 {
margin: 20px;
width: 200px;
height: 200px;
background-color: yellow;
}
#box2 {
margin: 20px;
width: 200px;
height: 200px;
background-color: red;
/*position: relative;
left: 100px;
top: 100px;*/
}
</style>
<div id="box1"></div>
<div id="box2"></div>

其中box2中的注釋代碼未生效前，是按照文檔流進行排序呈現。

但是，當注釋代碼取消注釋生效后，就會相對文檔流中應當呈現的位置進行移動。

所以，相對定位的參照物是它本身。