之前說過了css有三種基本的布局機制：普通流、浮動和絕對定位。除非專門指定，否則所有的框都在普通流中定位。而普通流中元素框的位置由元素在html中的位置決定。
相對定位實際上被看做普通流定位模型中的一部分，因為它是通過設定垂直或者水平位置，讓這個元素相對於它原來的位置移動。而且，雖然它從原來位置移走，但是仍然佔據原來所佔的空間。可以用left,right來控制元素向右,左的移動，可以用top,bottom來控制元素的下,上的移動。需要注意的是：相對定位時，數值型偏移是對於元素自身的，而百分比卻是相對於包含塊的width與height的。如下圖：
絕對定位是css中3種定位機制之一，它會使定位元素與文件流無關，因此不佔據空間。文件流中其他元素會像絕對定位的元素不存在時一樣布局。
絕對定位元素的位置相對於最近的已定位祖先元素，如果元素沒有已定位的祖先元素，那麼它的位置相對於初始包含塊document。
絕對定位元素的伸縮性：當我們把 width 設定為 auto 的時候（或者不設定 ），絕對定位元素會根據其 left 和 right 自動伸縮其大小。top與bottom也是如此。
絕對定位元素居中：因為絕對定位元素具有伸縮性，所以如果我們將絕對定位元素的width設定為auto時，同時把left與right設定為0，那麼元素就會將其相對的父元素水平填充滿。這時如果我們把寬度設定為固定值，margin為auto的前提下，只要 left 和 right 的值相等（或都為0），且不超過其相對元素減去該絕對定位元素 width 的一半，就可以實現水平居中了。
垂直居中也是如此，只要top與bottom的值相等就可以，這樣我們的絕對定位元素就做到了垂直水平居中了。
CSS中相對定位與絕對定位
看了幾個講解定位的部落格，覺得還不錯，分享之 部落格一 1，相對定位 請注意，相對定位並沒有脫離文件流，雖然表現區脫離了原來的文字流，但是在文字流中還還有此相對定位的 老窩 這點要特別注意，因為在實際應用中如果相對定位的位移數值過大，那麼原有的區域就會形成一塊空白。2，絕對定位 如果需要這個絕對定位...
CSS中的絕對定位與相對定位
層級關係為 為改變參照物 橘色框 後的效果 層級關係為 參照物為最頂級的元素情況。層級關係為 僅使用margin屬性布局絕對定位元素的情況 此情況，margin bottom 和margin right的值不再對文件流中的元素產生影響，因為該元素已經脫離了文件流。另外，不管它的祖先元素有沒有定位，都...
CSS中的絕對定位與相對定位
層級關係為 為改變參照物 橘色框 後的效果 層級關係為 參照物為最頂級的元素情況。層級關係為 僅使用margin屬性布局絕對定位元素的情況 此情況，margin bottom 和margin right的值不再對文件流中的元素產生影響，因為該元素已經脫離了文件流。另外，不管它的祖先元素有沒有定位，都...