之前說過了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中的相對定位與絕對定位