css中絕對定位和相對定位的區別

不管是哪種定位，都必須有乙個參照物，理清參照物我們就對這些定位方式了解了一半。

static，預設值。位置設定為static的元素，它始終會處於頁面流給予的位置（static 元素會忽略任何 top、bottom、left、right和z-index 宣告）。

inherit，規定應該從父元素繼承 position 屬性的值。但是任何的版本的 internet explorer （包括 ie8）都不支援屬性值 "inherit"。

fixed，生成絕對定位的元素，可定位於相對於瀏覽器視窗的指定座標。元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規定。不論視窗滾動與否，元素都會留在那個位置。

absolute，生成絕對定位的元素，相對於距該元素最近的已定位（position不為static）的祖先元素進行定位。此元素的位置可通過 "left"、"top"、"right" 以及 "bottom" 屬性來規定。

relative，生成相對定位的元素，相對於該元素在文件中的初始位置進行定位。通過 "left"、"top"、"right" 以及 "bottom" 屬性來設定此元素相對於自身位置的偏移。

相對定位的參照物是它本身

每乙個元素都可以看作乙個盒子，文件流就是由這些盒子堆砌而成，而每個盒子都在這個文件流中佔據了乙個位置，如果我們把這個盒子設定成相對定位，那麼就可以拿起這個盒子相對於它原來所佔據的位置向別的地方移動，如設定left:50px就是相對於盒子原來位置向右移動了50個畫素，我們用具體的例子來說明。

下面是乙個所有元素都沒有設定過任何定位方式的原始頁面布局。

我們把box-2設定成相對定位並向左移動60畫素，向下移動120畫素。

.box-2

得到下面的效果

絕對定位的參照物是相對於該元素最近的已定位的祖先元素，如果沒有乙個祖先元素設定定位，那麼參照物是body。

絕對定位與相對定位的一大不同之處就是，當我們把乙個元素設定成絕對定位，那麼這個元素將會脫離文件流，漂浮在文件流上方，並且後面的元素將會填充它原來的位置。絕對定位元素根據它的參照物移動自己的位置，而參照物則需要根據它祖先元素的定位設定來確定。我們就用例項說明絕對定位的特點和需要注意的地方。

下面是乙個所有元素都沒有設定過任何定位方式的原始頁面布局。

祖先元素都沒有設定定位，元素相對於body轉移位置。

給box-2設定成position: absolute;

.box-2

得到下面的效果

你可能會問了，不是說祖先元素都沒有定位時，元素會相對於body來改變自己的位置嗎，為什麼它還是飄在原來的位置，而沒有飄到body頂頭呢，那麼請看，我把left和top屬性加上會出現什麼樣的結果。

.box-2

得到下面的效果

祖先元素grandpa設定定位，元素相對於grandpa轉移位置。

.grandpa .box-2

得到下面的效果

祖先元素father設定定位，元素相對於father轉移位置。

.father .box-2

得到下面的效果

父元素son以及祖先元素father、grandpa都設定定位，元素相對於son轉移位置。

.grandpa,.father,.son .box-2

得到下面的效果